Can I preview the generated UI automatically?

Yes, if the Agent Browser is enabled, the skill can automatically open Storybook or a local development server to take snapshots and verify visual fidelity.

Does this skill include application logic or data fetching?

No, this skill is specifically designed to generate 'look-only' skeletons. Logic, state, and data fetching are handled in subsequent steps to maintain a clean separation of concerns.

What frameworks can I use with this skill?

It supports a wide range of frameworks including React, Vue, Svelte, SwiftUI, Flutter, Web Components, and plain HTML/CSS.

How does it handle responsive design?

It maps Figma's Auto Layout, constraints, and resizing rules directly to CSS flexbox, grid, or stack-based layouts based on the tokens defined in your SSOT.

What happens if text content is missing from the design files?

The skill follows a strict 'no guessing' rule. If a copyKey is missing from your copy.json, it will stop and prompt you to provide the correct text to ensure consistency.

Design-to-Code Static UI Generator

Name: Design-to-Code Static UI Generator
Author: mae616

bymae616

•

设计工具

Generates technical-stack-compliant static UI skeletons from design SSOT JSON files to accelerate frontend development.

The design-ui skill transforms standardized design specifications—including tokens, component definitions, and layout context—into pure presentational code. It acts as a critical bridge between design handoff and implementation by creating pixel-perfect UI skeletons that strictly adhere to defined design tokens and responsive rules without the clutter of business logic or state management. This ensures a clean, maintainable foundation for developers to build upon while maintaining 100% fidelity to the original design source of truth.

主要功能

018 GitHub stars

02Strict enforcement of Design Tokens to eliminate magic numbers

03Automated mapping of Figma Auto Layout and constraints to CSS/Styles

04Self-verification via Agent Browser for Storybook and preview snapshots

05Integrated management of image assets and semantic copy from JSON sources

06Multi-stack support including React, Vue, Svelte, SwiftUI, and Flutter

使用场景

01Creating a documented Storybook library based on a shared design system

02Rapidly bootstrapping a multi-page frontend foundation from Figma-exported JSON data

03Standardizing UI code across teams by enforcing SSOT-driven development patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mae616/ai-template design-ui

For use in Claude.ai and ChatGPT