What is the primary purpose of the Design Direction skill?

It is the final stage of the design-crit pipeline that synthesizes all locked design decisions into structured documentation and developer-friendly assets.

Where are the design deliverables stored?

All generated files, including the direction.html and design-tokens.json, are stored within the .design-crit/ directory in your project repository.

What happens if some design facets are still unresolved?

The skill performs a prerequisite check and will ask if you want to continue the critique, skip the unresolved facets, or let the AI decide them for you.

Does this skill generate production CSS?

It generates semantic design tokens in JSON format, which can be used by developers or other skills to generate theme-specific CSS or Tailwind configurations.

Design Direction

Name: Design Direction
Author: metedata

bymetedata

0•

デザインツール

Synthesizes completed design critiques into comprehensive direction documents, semantic design tokens, and actionable implementation handoffs.

The Design Direction skill serves as the final orchestration layer of the design critique pipeline, transforming iterative feedback into a finalized project strategy. It automatically verifies that all design facets are resolved, then weaves individual decisions into a polished HTML direction document and a version-controlled Markdown decision log. By extracting semantic design tokens—such as color systems, typography scales, and spacing units—directly from winning wireframes into JSON, it bridges the gap between conceptual UI design and frontend implementation within Claude Code.

主な機能

01Maintains a detailed Markdown decision log documenting every round of critique and rationale.

020 GitHub stars

03Generates a polished, self-contained HTML direction document with integrated wireframe galleries.

04Extracts semantic design tokens (colors, typography, spacing) into JSON for direct developer use.

05Automatically handles unresolved facets by offering to skip, continue, or delegate decisions.

06Provides tech-stack specific handoff instructions to transition from design to frontend code.

ユースケース

01Generating a design system foundation by extracting tokens from approved HTML wireframes.

02Finalizing a multi-facet UI/UX critique session into a single source of truth for stakeholders.

03Creating a historical audit trail of design decisions and rationales for long-term project maintenance.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add metedata/design-crit design-direction

For use in Claude.ai and ChatGPT

主な機能

01Maintains a detailed Markdown decision log documenting every round of critique and rationale.

020 GitHub stars

03Generates a polished, self-contained HTML direction document with integrated wireframe galleries.

04Extracts semantic design tokens (colors, typography, spacing) into JSON for direct developer use.

05Automatically handles unresolved facets by offering to skip, continue, or delegate decisions.

06Provides tech-stack specific handoff instructions to transition from design to frontend code.

ユースケース

01Generating a design system foundation by extracting tokens from approved HTML wireframes.

02Finalizing a multi-facet UI/UX critique session into a single source of truth for stakeholders.

03Creating a historical audit trail of design decisions and rationales for long-term project maintenance.