skills.rest
Randy-C-X
Randy-C-XCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Translate design requirements into tokens, components, and layout patterns for frontend interfaces.

2|Updated Apr 2, 2026
Search Tags:#design#ui#accessibility#frontend#tokens#ux#design-system
One-click install
npx skills add https://github.com/Randy-C-X/allanyiin_skills --skill frontend-design-randy-c-x
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Randy-C-X/allanyiin_skills/tree/main/skills/frontend-design
Command: npx skills add https://github.com/Randy-C-X/allanyiin_skills --skill frontend-design-randy-c-x

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

協助設計師、PM 與開發者將需求快速轉化為可上線的前端介面與設計系統，降低跨部門協作成本。

Core Features & Use Cases

  • 從需求輸出 Design Tokens、shared components、page layouts 及對應前端程式碼。
  • 建立或整理 design system 與元件規範，促進跨專案一致性。
  • 處理多步驟 UX 流程時，產出 journey map / user flow / wireflow 作為落地契約。
  • 例如工作台/儀表板的任務導向布局，避免堆疊卡片與信息過載。
  • Use case: 轉換 landing page、dashboard、component library 的設計輸出。

Quick Start

先定義主任務與使用者情境，依 TOKEN、元件與頁面佈局輸出可上線的 UI 套件。

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I translate design requirements into frontend UI components and tokens?▼

Design tokens and component libraries are structured by translating UI requirements into token-driven styling rules, accessible interactions, and responsive state definitions for cross-project design consistency.

What is the best way to build a dashboard layout without information overload?▼

The best way to build a dashboard layout without information overload is applying task-oriented layout patterns that structure user flows and wireflows as functional contracts instead of stacking cards.

Can I generate user flow and wireflow diagrams for multi-step UX processes?▼

Yes, you can generate user flow and wireflow diagrams for multi-step UX processes to serve as execution contracts that bridge design requirements and frontend development handoffs.

Does this approach enforce accessibility and responsive states for web apps?▼

Yes, this approach enforces accessibility and responsive states for web apps by applying token-driven styling constraints and clear output contracts throughout the component generation process.

How do I start creating a design system for websites and web apps?▼

To start creating a design system for websites and web apps, define the main task and user scenarios, then output token definitions, component libraries, and UI guidelines to ensure consistency.

Related Skills

Explore More Design & Creative Skills→
alansmelloalansmello

speckit-tasks

Generate dependency-ordered tasks.md from design artifacts like plan.md and spec.md.

Community
Advanced
AVVlasovAVVlasov

frontend-design

Creates frontend interfaces with intentional design principles and code implementation.

Community
Advanced
EduardoSousaPOEduardoSousaPO

web-design-guidelines

Automate compliance checking of UI code against web interface guidelines.

Community
Intermediate
dylantarredylantarre
38

angular

Build token-driven Angular components with signals and standalone components.

Community
Advanced