writing-specs-designs

Framework-driven guidance for writing specs and design documents from seven product leaders. Determine fidelity level upfront: low-fi sketches for alignment, high-fi specs for implementation details Favor prototypes over static documentation; test the feel with real software rather than screenshots Use fat marker sketches and breadboarding to avoid getting stuck on UI details like colors or spacing Recognize that temporary design shortcuts often become permanent product decisions; design with long-term implications in mind Optimize for efficiency in every interaction, especially mobile; each tap must provide immediate value to users

INSTALLATION
npx skills add https://github.com/refoundai/lenny-skills --skill writing-specs-designs
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

$2a

Well-shaped specs clarify without over-specifying

Ryan Singer: "The output of the shaping session is some kind of drawing or diagram where engineers, product, and design are all saying, 'I know exactly what to go build.'" Aim for a level of detail where the team sees the 'electricity in the walls' without prescribing UI details.

Prototype to feel the product

Tamar Yehoshua: "I can't tell you if this is going to work. I have to feel it. I have to try it. A mock-up doesn't tell you what it's going to feel like." Push for prototypes with real data to test experience, not just static screenshots.

Code prototypes over static mocks

Noah Weiss: "We stopped spending cycles on design explorations of static mocks and said, 'How quickly can we get into prototyping the path in real software, even if it's messy and throwaway?'" Move to real software prototypes as quickly as possible.

Products live in the pixels

Nikita Bier: "You should be designing the hierarchy, the pixels, the flows, everything. Products live and die in the pixels." For zero-to-one products, own the granular design details; every tap is precious.

Optimize every tap

Nikita Bier: "Every tap on a mobile app is a miracle. Users will turn and bounce to their next app very quickly." Design with extreme efficiency; each interaction must provide immediate value.

Use fat marker sketches

Ryan Singer: "Use breadboarding and fat marker sketching. We're going to hit this button, go to here, this calculation runs, then we get this answer." Fat markers prevent getting bogged down in UI details like colors or spacing.

Shortcuts become permanent

Tom Conrad: "Temporary design shortcuts often become permanent product legacies that persist through multiple technical rewrites." Be mindful that early implementation details may define long-term user expectations.

PMs should learn to sketch

Ravi Mehta: "Learn how to sketch, learn Balsamiq. Having that ability to think at a conceptual level about how UI and UX works is a critical part of being a PM." Develop self-sufficiency in creating conceptual wireframes.

Questions to Help Users

  • "Do you need team alignment (low-fi sketch) or implementation guidance (high-fi spec)?"
  • "Could you prototype this instead of documenting it?"
  • "What are the 10 or fewer moving pieces in this solution?"
  • "Have you tested this design with real users, not just stakeholders?"
  • "What temporary shortcuts might become permanent decisions?"
  • "Is every tap in this flow providing clear value to the user?"

Common Mistakes to Flag

  • Over-specified wireframes - High-fidelity mockups can slow collaboration; start with fat marker sketches
  • Static mocks for complex interactions - Test the feel with real prototypes, not screenshots
  • Ignoring pixel-level details - For consumer products, every tap and transition matters
  • Specs that no one reads - If engineers aren't using the document, it's the wrong format or fidelity
  • Temporary decisions that persist - Recognize that early shortcuts may last decades

Deep Dive

For all 10 insights from 7 guests, see references/guest-insights.md

Related Skills

  • Writing PRDs
  • Usability Testing
  • Stakeholder Alignment
  • Shipping Products
BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card