skills.rest
joi-fairshare
joi-fairshareCOMMUNITY
Explore all skills by this author →
GitHub

design-mockup-web

Generate responsive HTML mockups from design tokens and specifications.

1|2|Updated Mar 19, 2026
Search Tags:#html#iteration#playwright#responsive#design-language#design-mockup#visual-companion
One-click install
npx skills add https://github.com/joi-fairshare/agentic-workflow --skill design-mockup-web
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-mockup-web
Source: https://github.com/joi-fairshare/agentic-workflow/tree/main/skills/design-mockup-web
Command: npx skills add https://github.com/joi-fairshare/agentic-workflow --skill design-mockup-web

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Transforms design language materials and user direction into a polished, responsive HTML mockup served through the visual companion, preventing ad-hoc prototypes and misaligned iterations.

Core Features & Use Cases

  • Token-Driven Styling: extracts palette, typography, spacing, and layout decisions from .impeccable.md and design-tokens.json so every mockup matches the established brand.
  • Feedback-Guided Iteration: serves the single-file HTML through the visual companion, gathers AskUserQuestion feedback, refines the layout, content, and interactions until the reviewer approves a responsive screen concept, and helps prototype dashboards or signup flows before handing off to engineering.
  • Baseline Capture: once the user signs off, uses a Playwright-driven Agent to capture the mockup screenshot under the repo workspace for design verification and developer handoff.

Quick Start

Invoke /design-mockup-web dashboard to generate a responsive HTML concept from the current design tokens.

Frequently Asked Questions about design-mockup-web

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

FAQPage Schema
How do I generate HTML mockups from design tokens?▼

Generating HTML mockups from design tokens requires extracting palette, typography, and spacing from .impeccable.md and design-tokens.json to apply inline token-based HTML/CSS. This ensures every responsive web screen concept matches the established brand language without manual prototype creation.

What is a visual companion feedback loop for responsive web mockups?▼

A visual companion feedback loop serves the single-file HTML mockup through a browser session, gathers AskUserQuestion feedback, and refines layout, content, and interactions until the reviewer approves. This prevents ad-hoc prototypes and misaligned iterations during dashboard or signup flow creation.

Can I use Playwright to capture baseline screenshots of HTML mockups?▼

Playwright captures baseline screenshots of approved HTML mockups under the repo workspace for design verification and developer handoff. Once a user signs off on the responsive screen concept, the Playwright-driven Agent captures the mockup screenshot automatically.

Do I need design-tokens.json and .impeccable.md to create responsive web screen concepts?▼

Responsive web screen concepts require .impeccable.md and design-tokens.json to extract palette, typography, spacing, and layout decisions. These files ensure the generated HTML mockup applies inline token-based styling that matches the established design language.

What's the best way to prototype dashboards before handing off to engineering?▼

Prototyping dashboards before engineering handoff is best done by generating token-driven HTML mockups served through the visual companion, iterating with reviewer feedback, and capturing Playwright baseline screenshots stored in the repo workspace for design verification.

Why does my HTML mockup not match the established design language?▼

HTML mockups misalign with the design language when they bypass token-driven styling extracted from .impeccable.md and design-tokens.json. Applying inline token-based HTML/CSS ensures palette, typography, and spacing match the brand and prevents ad-hoc prototype creation.

Related Skills

Explore More Design & Creative Skills→
joi-fairsharejoi-fairshare
1

design-refine

Dispatch Impeccable refinement commands to align UI with design tokens.

Community
Advanced
xpert-aixpert-ai
8

image-to-code

Convert visual design assets into responsive frontend code with visual QA.

Official
Advanced
ToowireddToowiredd
33

browser-app-creator

Create single-file HTML/CSS/JS web apps with localStorage persistence.

Community
Basic
Mohamed-ElkahefMohamed-Elkahef

ui-design

Generate self-contained single-file HTML UI prototypes with Tailwind CSS and Chart.js.

Community
Intermediate