skills.rest
Baronki
BaronkiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generate token-based frontend code from UI requirements.

1|Updated Mar 21, 2026
Search Tags:#typescript#accessibility#frontend#react#design-system#design-tokens
One-click install
npx skills add https://github.com/Baronki/KISWARM8.0 --skill frontend-design-baronki
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Baronki/KISWARM8.0/tree/main/kiswarm7_remote/skills/frontend-design
Command: npx skills add https://github.com/Baronki/KISWARM8.0 --skill frontend-design-baronki

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill translates vague UI requirements into executable, production-grade frontend code through a token-first design system, ensuring consistency and accessibility while enabling creative execution.

Core Features & Use Cases

  • Tokens-first design system drives colors, typography, spacing, radii, and elevation to ensure consistent UIs.
  • Production-ready code samples including CSS tokens, TypeScript components, and templates that developers can copy-paste.
  • Design-to-build workflow covering design analysis, token generation, component development, page assembly, and QA with accessibility checks.
  • Example: A team builds a React app with a shared design system, generating components, pages, and tokens from briefs.

Quick Start

Provide a token-driven frontend scaffold from a UI brief.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I turn vague UI requirements into production-ready React code?▼

To turn vague UI requirements into production-ready React code, use a tokens-first design system that translates briefs into executable CSS tokens and TypeScript components, ensuring consistent styling and accessibility throughout the development workflow.

Does this approach work with Vue, Svelte, and Next.js projects?▼

Yes, this design-to-build workflow applies to building websites, dashboards, and component libraries across React, Vue, Svelte, and Next.js projects, generating token-based styling and TypeScript components for each framework.

What is the best way to ensure accessibility and responsive behavior in a design system?▼

The best way to ensure accessibility and responsive behavior is through a rigorous design-to-build workflow that includes QA with accessibility checks, generating token-based styling and state coverage for components and layouts from the start.

How do I build a complete design system from a UI brief?▼

To build a design system from a UI brief, follow a structured workflow covering design analysis, token generation for colors and typography, component development, page assembly, and final QA with accessibility validation to ensure production-grade output.

Related Skills

Explore More Design & Creative Skills→
cshyangcshyang

gsd:workflow:discovery-phase

Plan and execute a project discovery phase to define requirements and scope.

Community
Intermediate
TIAN0517TIAN0517

frontend-design

Transform UI design requirements into TypeScript frontend code with CSS variable tokens.

Community
Advanced
Yukine5377Yukine5377

ba-frontend-code-gen

Generate React/TypeScript/Tailwind frontend code from Brand Guideline and System Design.

Community
Advanced
indykishindykish
2

frontend-design

Plan and implement accessible React and TypeScript frontend interfaces with token-based theming.

Community
Advanced