skills.rest
PiercingXX
PiercingXXCOMMUNITY
Explore all skills by this author →
GitHub

design-prototype

Generate branded self-contained HTML prototypes from design tokens and templates.

1|Updated Jul 9, 2026
Search Tags:#HTML#dashboard#design tokens#slide deck#brand system#UI layout#design prototype
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill design-prototype-piercingxx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-prototype
Source: https://github.com/PiercingXX/xx-stack/tree/main/runtime/skills/design-prototype
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill design-prototype-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

The skill eliminates the slow back-and-forth of translating vague product ideas into working, branded UI artifacts by generating real HTML prototypes directly from a locked brief and a verified design system.

Core Features & Use Cases

  • Brief-to-artifact workflow: Captures scope, audience, tone, brand cues, and scale before writing any UI code to prevent rework.
  • Design-system driven styling: Reads DESIGN.md tokens and maps them into CSS :root variables so the output stays on-brand and consistent.
  • Template-based HTML generation: Produces a single self-contained HTML file (with inline CSS/JS) composed from approved layout skeletons and guided checklists.
  • Use cases: Landing pages, dashboards/admin panels, mobile screens, slide decks, editorial/document layouts, and office-style artifacts (specs, runbooks, OKRs, invoices).

Quick Start

Ask the skill to build a multi-screen SaaS dashboard prototype using the provided brand direction and a warm editorial tone.

Frequently Asked Questions about design-prototype

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

FAQPage Schema
How do I generate a branded HTML design prototype from a brief?▼

To generate a branded HTML design prototype, provide a brief defining scope, audience, and tone. The skill reads design-system tokens, maps them into CSS variables, and outputs a self-contained HTML file built from approved layout skeletons.

What is a design token and how does it keep UI layouts consistent?▼

A design token is a variable storing visual design choices. This skill reads tokens from a design system file and injects them as CSS root variables, ensuring your dashboard or mobile screen maintains strict brand consistency.

Can I build a mobile app screen and an admin dashboard using the same brand system?▼

Yes, you can build a mobile app screen and an admin dashboard using the same brand system. The skill applies validated section layouts and token-consistent styling across multiple use cases, ensuring visual continuity across different artifact types.

What's the best way to create a slide deck or document layout with consistent UI styling?▼

The best way to create a slide deck or document layout with consistent UI styling is using template-based generation. It composes a single self-contained HTML file from approved layout skeletons guided by a self-critique gate validating token consistency.

Do I need a pre-existing design system to produce a design prototype?▼

Yes, you need a pre-existing design system file containing your design tokens. The skill requires reading this file to extract brand variables and map them into the CSS of your HTML prototype, preventing unbranded UI generation.

Why does my HTML design prototype look inconsistent with my brand?▼

Your HTML design prototype looks inconsistent when token mapping fails or a design system file is missing. The skill enforces brand consistency by running a self-critique gate validating generated CSS variables against original design tokens.

Related Skills

Explore More Design & Creative Skills→
AradotsoAradotso
3

awesome-claude-design

Generate design tokens and UI components from DESIGN.md files.

Official
Basic
LAF-USLAF-US

playground

Create self-contained HTML playgrounds with inline CSS and JS.

Official
Intermediate
saajunaidsaajunaid

design-system-tokens

Generate and validate design tokens as CSS variables across three-layer architectures.

Community
Intermediate
clovernguyen1010-ship-itclovernguyen1010-ship-it

ba-brand-demo-gen

Convert Brand Guideline Markdown into standalone HTML demos with inline CSS.

Community
Advanced