Design Doc
Convert visual directions and screenshots into a stable design system document for AI coding agents to follow.
$25
Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+22 moreClaude CodeCursorCodex CLIMuseDots
OpenClaw
Manus
Grok
Grok Bot+18 agentsDesign Doc
Example session with this skill installed
Convert this dashboard screenshot into a design.md file. Use indigo for the primary brand color, a subtle grain texture for the background, and snappy 150ms spring animations.
- Read your context and instructions
- Compiled the design doc
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.
Connects securely to your tools. The creator never sees your data.
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.
How to use
Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean 4 months ago
- Passed all security checks, Safe to install