design-import
CommunityTurn Stitch designs into build-ready specs
Authorsupermalang
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill removes the friction between a generated UI design and a codebase by converting Stitch output into a clear, implementation-ready design spec that follows the project's conventions.
Core Features & Use Cases
- Design extraction: Pulls structured colors, typography, layout, and state information from Google Stitch outputs.
- Convention mapping: Reconciles imported design choices with the project's approved component library, Tailwind theme, accessibility rules, and design language.
- Implementation handoff: Writes a spec under docs/design and updates DESIGN.md so the next step can be handled cleanly by the coding workflow.
- Use case: A product designer supplies a new screen concept, and this Skill turns it into a precise spec that engineers can implement without copying raw generated markup.
Quick Start
Ask the skill to import the target Stitch frame and produce a design spec for it in docs/design using the project's existing conventions.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: design-import Download link: https://github.com/supermalang/ai-augmented-coding/archive/main.zip#design-import Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 536,000+ vetted skills library on demand.