skills.rest
RavitejaKarra24
RavitejaKarra24COMMUNITY
Explore all skills by this author →
𝕏@RavitejaKarra24GitHub

create-design-md

Create or update a DESIGN.md documenting a product's design language from repository or URL evidence.

Updated Mar 12, 2026
Search Tags:#typography#documentation#design system#design tokens#tailwind#design.md#ui context
One-click install
npx skills add https://github.com/RavitejaKarra24/dotfiles --skill create-design-md-ravitejakarra24
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-design-md
Source: https://github.com/RavitejaKarra24/dotfiles/tree/main/agents/.agents/skills/create-design-md
Command: npx skills add https://github.com/RavitejaKarra24/dotfiles --skill create-design-md-ravitejakarra24

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/design.md.

What problem does it solve? Coding agents and developers lack persistent, structured UI context about a product's design system, leading to inconsistent styling decisions. This Skill produces a validated DESIGN.md that captures design tokens, typography, and component guidance from real evidence. ## Core Features & Use Cases - Repository Mode: Audits a local product repository's tokens, themes, shared primitives, and routes to document normative design decisions. - URL Mode: Reconstructs a draft DESIGN.md from a public website by inspecting rendered DOM, computed styles, and loaded stylesheets across viewports. - Schema Validation & Export: Enforces a strict frontmatter schema and validates output with npx @google/design.md lint and export commands for Tailwind v3/v4 or DTCG targets. - Use Case: Point the Skill at your web app's repository to generate a DESIGN.md that coding agents can load as persistent UI context, ensuring generated components follow your actual design tokens. ## Quick Start Ask the agent to create a DESIGN.md for this repository documenting its design system, or provide a public URL to reconstruct one from rendered evidence.

Frequently Asked Questions about create-design-md

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

FAQPage Schema
How do I create a DESIGN.md for my repository?▼

Run the Skill in repository mode against your product's root. It audits existing tokens, themes, shared primitives, and routes in order, then writes a validated DESIGN.md containing only evidence-backed design decisions.

Can I generate a design document from a public website URL?▼

Yes, URL mode inspects the rendered DOM, computed styles, and loaded stylesheets at desktop and mobile widths. The output is labeled a reconstructed draft and only includes values verified by computed styles or recurrence across sampled pages.

What export formats does DESIGN.md support?▼

The Skill selects css-tailwind for Tailwind v4, json-tailwind for Tailwind v3, and dtcg otherwise. It validates output with npx @google/design.md export and checks that every populated frontmatter category emits its corresponding token family.

Does creating a DESIGN.md modify my product source code?▼

No, the Skill only creates or updates the DESIGN.md file itself. It explicitly forbids changing product source, dependencies, configuration, or generated files during the audit.

Why are some design values omitted from the generated DESIGN.md?▼

Values are omitted when they lack evidence: uncertain candidates, page-local patterns without recurrence, or values that cannot be verified against computed styles or governing sources. This prevents accidental implementation patterns from becoming design rules.

Related Skills

Explore More Design & Creative Skills→
arbazkhan971arbazkhan971
26

designsystem

Standardize design tokens and component APIs across products.

Community
Advanced
AradotsoAradotso
3

figma-design-md-generator

Generate DESIGN.md and SKILL.md from Figma design tokens and component families.

Official
Intermediate
kobogithubkobogithub

uiux-viewport-testing

Automate responsive design testing by resizing browser viewports and capturing screenshots.

Community
Intermediate
gil00pitagil00pita

storybook

Develop, document, and test UI components in isolated Storybook workshops.

Community
Intermediate