writing-specs-designs
refoundai/lenny-skills
Write effective specs and design documents using frameworks from 7 product leaders.
What is writing-specs-designs?
Help create technical specs, feature specs, and design docs that drive team alignment and implementation. Use this when communicating product requirements to engineering and design teams, deciding between low-fidelity sketches for alignment or high-fidelity specs for implementation.
- Determine the right fidelity level (conceptual vs. detailed implementation)
- Guide creation of fat marker sketches and breadboarding to invite collaboration
- Push toward functional prototypes over static documentation
- Identify key affordances, connections, and system behaviors
- Flag common mistakes like over-specification and temporary shortcuts becoming permanent
- Help optimize every interaction for user value
How to install writing-specs-designs
npx skills add https://github.com/refoundai/lenny-skills --skill writing-specs-designsHow to use writing-specs-designs
- 1.Ask the user whether they need low-fidelity alignment (sketch/diagram) or high-fidelity implementation guidance (detailed spec)
- 2.Encourage prototyping in real software over static mocks when testing complex interactions
- 3.Help identify the 10 or fewer key moving pieces in the solution
- 4.Guide creation of fat marker sketches or breadboarding diagrams to invite participation
- 5.Review for common mistakes: over-specification, static mocks for interactions, ignored pixel details, and temporary shortcuts that may persist
Use cases
- Creating alignment on a new feature across engineering, product, and design teams
- Developing a technical spec that engineers can build from without over-constraining UI details
- Prototyping a complex interaction flow to test how it feels with real data
- Sketching out a zero-to-one product where pixel-level design decisions matter
- Reviewing a spec to ensure it's at the right fidelity for its audience
- Product managers writing specs and design docs
- Engineering leads creating technical specifications
- Design leads communicating product requirements
- Teams seeking faster alignment on feature direction
writing-specs-designs FAQ
Start with low-fidelity sketches (fat markers, breadboarding) to drive collaboration and invite corrections. Move to high-fidelity only when you need implementation guidance. Low-fidelity sketches get teams to shared vision faster.
Aim for the level where engineers, product, and design all say 'I know exactly what to go build.' Avoid over-specifying UI details like colors or spacing; focus on the moving pieces, affordances, and system behaviors.
Use prototypes with real data to test how the product feels. Static mocks don't reveal interaction quality or user experience. Move to real software prototypes as quickly as possible, even if messy and throwaway.
Avoid temporary design shortcuts—they often become permanent product legacies. Also flag specs no one reads; if engineers aren't using it, reconsider the format or fidelity level.
For mobile and consumer products especially, optimize every tap. Each interaction must provide immediate, clear value to the user or it risks users bouncing to another app.
Full instructions (SKILL.md)
Source of truth, from refoundai/lenny-skills.
name: writing-specs-designs description: Help users write effective specs and design documents. Use when someone is creating technical specs, feature specs, design docs, or trying to communicate product requirements to engineering and design teams.
Writing Specs & Designs
Help the user write effective specs and design documents using frameworks and insights from 7 product leaders.
How to Help
When the user asks for help with specs and design docs:
- Determine the fidelity level - Ask if they need conceptual alignment (low-fi) or detailed implementation guidance (high-fi)
- Encourage prototyping over polish - Push toward functional prototypes where possible rather than static documentation
- Focus on moving pieces - Help them identify the key affordances, connections, and system behaviors
- Consider long-term implications - Remind them that temporary shortcuts often become permanent design decisions
Core Principles
Low-fidelity sketches drive collaboration
Christina Wodtke: "If I got on the whiteboard and drew really badly, somebody else will go, 'No, no, no, it doesn't work that way. Give me this pen.' It gets you so fast to a shared vision." Drawing 'badly' invites participation and corrections, accelerating alignment.
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
Related skills
More from refoundai/lenny-skills and the wider catalog.

written-communication
Help users write clearer, more persuasive business communication using frameworks from 38 product leaders.

ai-evals
Design and run systematic evaluations for AI products to measure model quality and output performance.

ai-product-strategy
Strategic guidance for building AI products using frameworks from 94 product leaders.

analyzing-user-feedback
Extract actionable insights from customer feedback using techniques from 56 product leaders.

react-router-data-mode
Build React applications using React Router's data mode with createBrowserRouter and RouterProvider. Use when working with route objects, loaders, actions, Form, useFetcher, or pending/optimistic UI without the Vite plugin.

react-router-framework-mode
Build full-stack React applications with React Router's framework mode, file-based routing, and data loading.