agentsclimarketplace

Design spec writing

Skill Dragoon0x/everything-design-taste/skills/design-spec-writing

A taste system for AI agents. 288 skills, 80 agents, 12 rules, and 8 hooks that turn generic AI output into work with genuine design quality. Anti-slop detection, typography craft, color systems, brand voice, product strategy, and 50+ specialized reviewers across UI, industry, platform, and content domains.

Install
npx -y skills add Dragoon0x/everything-design-taste --skill design-spec-writing

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Writing design specifications that engineers actually read, reference, and build from accurately.

SKILL.md

2.3 KB, 522 tokens by cl100k_base, as published. Nobody here has run it

Design Spec Writing

Why Most Specs Fail

Engineers don't read specs because specs are usually:

  1. Too long (nobody reads 40 pages)
  2. Too vague ("the button should feel responsive")
  3. Out of date (the design changed but the spec didn't)
  4. Redundant with the Figma file (so why bother?)

What a Good Spec Contains

1. Overview (1 paragraph)

What this feature is, who it's for, and why it exists. Link to the product brief.

2. User Flow (visual)

Flowchart or numbered steps showing the complete path. Include error paths and edge cases.

3. Screen-by-Screen Spec

For each screen:

## [Screen Name]

**Entry point:** How does the user get here?
**Primary action:** What's the main thing they do?
**Exit points:** Where can they go from here?

### States
- Default: [description + link to Figma frame]
- Loading: [description]
- Empty: [description]
- Error: [description + error messages]
- Success: [description]

### Interactions
- [Element]: [Behavior on click/hover/focus]
- [Element]: [Behavior on click/hover/focus]

### Content
- [Field]: [Character limits, formatting rules]
- [Field]: [Validation rules, error messages]

### Edge Cases
- What happens when [unlikely but possible scenario]?
- What if the user [does something unexpected]?

4. Component Inventory

List of design system components used and any new components introduced.

5. Responsive Behavior

How the layout adapts. Not "it stacks on mobile." Specific decisions: what changes, what hides, what reorders.

6. Animation Spec

[Element]: [Trigger] → [Property] from [start] to [end]
Duration: [Xms], Easing: [curve], Delay: [Xms]

7. Acceptance Criteria

Testable statements:

  • User can [action] and sees [result]
  • When [condition], the system [behavior]
  • Error state shows when [trigger]

Writing Style

  • Use numbered steps, not paragraphs
  • Link to specific Figma frames, not "see designs"
  • Include actual copy, not "TBD"
  • State exact values (16px, not "some padding")
  • Update the spec when the design changes

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Keep looking

Skills are one crate of 326,984. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.