design-specs

Format design specs for components, screens, flows, and token mappings.

1|Updated Oct 13, 2024

Search Tags:#documentation #figma #handoff #tokens #ui-design #compose #design-specs

Ready to run

npx skills add https://github.com/cliveportman/way-of-the-goat --skill design-specs

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-specs
Source: https://github.com/cliveportman/way-of-the-goat/tree/main/.claude/skills/design-specs
Command: npx skills add https://github.com/cliveportman/way-of-the-goat --skill design-specs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design-specs provide a centralized standard for describing UI components, screens, flows, and token mappings so teams communicate consistently and reduce handoff errors.

Core Features & Use Cases

Standardized templates for components, screens, flows, and tokens.
Clear mappings from Figma tokens to Compose tokens to ensure accurate implementation.
Quick reference for creating or consuming design specs within a codebase and design workflow.

Quick Start

Start by inspecting the design-specs structure and follow the component, screen, flow, and token templates to bridge Figma designs with Compose implementations.

Frequently Asked Questions about design-specs

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

FAQPage Schema

How do I standardize design specs for Figma to Compose handoff?▼

Design specs for Figma to Compose handoff are standardized using templates for components, screens, flows, and tokens. This provides precise token-to-Compose mappings and bottom-up design-to-code guidance to reduce implementation errors.

What is the best way to document UI design tokens for a codebase?▼

Documenting UI design tokens for a codebase involves applying standardized token mapping templates. This ensures clear mappings from Figma design tokens to Compose tokens, providing a quick reference for accurate design consumption within the implementation.

How do I format design specs for components and flows?▼

Formatting design specs for components and flows requires applying structured templates across the design-specs structure. This standardizes handoff between design and implementation by defining clear formats and relationships for raw exports, screens, and tokens.

Can I use design-specs to map Figma tokens to Compose implementations?▼

Yes, you can map Figma tokens to Compose implementations. The design-specs structure provides precise token-to-Compose mappings, bridging Figma designs with Compose implementations to ensure accurate UI component rendering.

Does design-specs require any external dependencies or components?▼

No, design-specs does not require any external dependencies or components. It functions independently to provide standardized templates and mappings for design-to-code workflows within your existing codebase and design environment.