Design Doc
Convert visual directions and screenshots into a stable design system document for AI coding agents to follow.
- Generate a reusable design system from a single reference screenshot.
- Establish strict visual rules to prevent AI agents from inventing styles.
- Define color tokens and typography for consistent frontend implementation.
Secure checkout via Stripe
Included in download
- Generate a reusable design system from a single reference screenshot.
- Establish strict visual rules to prevent AI agents from inventing styles.
- Includes example output and usage patterns
See it in action
A real example of what this skill takes in and produces.
Sample output
Color System
- Surface: #FCFCFD (Subtle grain texture)
- Primary: #6366F1 (Indigo-600)
- Text-Primary: #0F172A (Deep Slate)
Interaction Feel
- Motion: Snappy 150ms springs for state transitions.
- Feedback: All primary buttons use a 2px offset "push" effect on click.
Design Doc
Convert visual directions and screenshots into a stable design system document for AI coding agents to follow.
Secure checkout via Stripe
Included in download
- Generate a reusable design system from a single reference screenshot.
- Establish strict visual rules to prevent AI agents from inventing styles.
- Includes example output and usage patterns
- Instant install
- One-time purchase
See it in action
A real example of what this skill takes in and produces.
Sample output
Color System
- Surface: #FCFCFD (Subtle grain texture)
- Primary: #6366F1 (Indigo-600)
- Text-Primary: #0F172A (Deep Slate)
Interaction Feel
- Motion: Snappy 150ms springs for state transitions.
- Feedback: All primary buttons use a 2px offset "push" effect on click.
About This Skill
Standardize Your AI's Design Implementation
Stop letting AI coding agents "hallucinate" random UI styles. The Design Doc Skill converts visual references, screenshots, and brand goals into a rigorous design.md specification that keeps your frontend implementation consistent and professional.
What it does
This skill acts as a bridge between high-level aesthetic choices and technical execution. It analyzes your design references to produce a comprehensive design system document covering:
- Visual Principles: Enforceable rules like "Progressive Disclosure" and "Visual Information Density."
- System Definition: Hierarchical color roles, typography scales, and spacing rhythms.
- Component Behaviors: Rules for surface treatments, state feedback (hover, active, disabled), and motion logic.
- Anti-Patterns: Explicit instructions on what not to do, preventing the AI from introducing generic "clean" filler.
Why use this skill
Prompting an AI to "make it look like Stripe" often results in shallow imitations. This skill extracts the underlying logic of a design language—such as its interface metaphor and grid behavior—ensuring that every page or component generated later feels like it belongs to the same product. It is an essential step before moving to UX flows or multi-phase coding tasks.
Use Cases
- Generate a reusable design system from a single reference screenshot.
- Establish strict visual rules to prevent AI agents from inventing styles.
- Define color tokens and typography for consistent frontend implementation.
- Create an interaction and motion guide for cohesive UI animations.
- Standardize UI copy tone and component behaviors across a project.
How to Install
mkdir -p ~/.claude/skills && curl -sL https://www.agensi.io/api/install/design-doc | tar xz -C ~/.claude/skills/Free skills install directly. Paid skills require purchase - use the download button above after buying.
Reviews
No reviews yet - be the first to share your experience.
Only users who have downloaded or purchased this skill can leave a review.
Early access skill
Be the first to review this skill.
Only users who have downloaded or purchased this skill can leave a review.
Security Scanned
Passed automated security review
Permissions
No special permissions declared or detected