skills.rest
decoutkhanqindev
decoutkhanqindevCOMMUNITY
Explore all skills by this author →
GitHub

kta-design-spec

Generates per-screen markdown design specs from feature PRDs for AI design tools.

Updated May 31, 2026
Search Tags:#markdown#design tokens#prd#design spec#stitch#screen mockup#figma ai
One-click install
npx skills add https://github.com/decoutkhanqindev/Lich-Viet-Loc-Phat --skill kta-design-spec-decoutkhanqindev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kta-design-spec
Source: https://github.com/decoutkhanqindev/Lich-Viet-Loc-Phat/tree/main/.claude/skills/kta-design-spec
Command: npx skills add https://github.com/decoutkhanqindev/Lich-Viet-Loc-Phat --skill kta-design-spec-decoutkhanqindev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Turning product requirements into design-ready briefs for AI design tools like Stitch, Figma AI, or Claude artifacts is slow and inconsistent. This Skill converts per-feature PRDs into structured, per-screen design specifications with complete component states, real copy, and design tokens, then bundles them into a single upload-ready file. ## Core Features & Use Cases - Style Foundation: Captures mood, color tokens, typography, spacing, motion intent, and accessibility floor once per app, gating all screen specs on it. - Per-Screen Spec Generation: Emits one markdown spec per screen with mandatory 6-state component lists (default/pressed/disabled/loading/empty/error), real copy, and a paste-ready AI-tool render block. - Bundle Script: Concatenates the style foundation, index, and all screen specs into one design-bundle.md via a Python script. - Use Case: After running a PRD pipeline for a running-tracker app, generate design specs for every screen and upload the single bundle file to Stitch to produce mockups. ## Quick Start Generate design specs for the PRDs in plans/my-app/prd/ and bundle them into one file I can upload to Figma AI.

Frequently Asked Questions about kta-design-spec

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate design specs for AI design tools from PRDs?▼

Run this Skill against a plans/{slug}/ directory containing per-feature PRD markdown files with Screens sections. It produces a style foundation, one spec per screen, and a bundled design-bundle.md you paste into Stitch, Figma AI, or Claude artifacts.

What input format does the design spec generator require?▼

It requires plans/{slug}/prd/ containing an INDEX.md plus at least one NN-prefixed feature PRD file. Each PRD must have a Screens section listing screens in PascalCase, and files must exceed 200 characters to pass the pre-flight gate.

Can I use the output with Stitch or Figma AI?▼

Yes, the output is tool-agnostic markdown designed for text-to-UI tools. The Phase 3 bundle script concatenates everything into design-bundle.md, which you upload directly to Stitch, Figma AI, or Claude artifacts.

Does this Skill generate Compose or Kotlin code?▼

No, it explicitly refuses to emit Compose, Kotlin, @Preview, or any DSL snippets. It produces markdown design specifications only, including component states, copy, tokens, and an AI-tool render block.

Why does the Skill stop before generating screen specs?▼

It stops when pre-flight validation fails, such as a missing prd/ directory, missing INDEX.md, PRDs without a Screens section, or a missing style-foundation.md. Fix the upstream PRD pipeline output or run Phase 1 first, then re-invoke.

Related Skills

Explore More Design & Creative Skills→
dantech0xffdantech0xff
4

kta-prd-pipeline

Generate per-feature PRDs with nested screens from validated idea briefs.

Community
Advanced
jinwoonghongjinwoonghong

moai-design-tools

Convert Pencil design files into React and Tailwind CSS code.

Community
Advanced
openyakopenyak
704

brand-review

Compare marketing content against brand guidelines and output a deviation report.

Official
Advanced
ragnar-pwninskjoldragnar-pwninskjold
125

prd-to-ux

Translate PRDs or product ideas into tool-agnostic screen prompts for UX generators.

Community
Advanced