skills.rest
TeamWiseFlow
TeamWiseFlowOFFICIAL
Explore all skills by this author →
GitHub

design-full

Generates complete web pages, app interfaces, and brand visual systems as HTML/CSS deliverables.

8.5k|1.4k|Updated Apr 24, 2024
Search Tags:#brand identity#visual review#Design system#HTML CSS#UI Design#Web design#Landing Page
One-click install
npx skills add https://github.com/TeamWiseFlow/wiseflow --skill design-full
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-full
Source: https://github.com/TeamWiseFlow/wiseflow/tree/main/crews/content-producer/skills/design-full
Command: npx skills add https://github.com/TeamWiseFlow/wiseflow --skill design-full

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Turning a vague design request into a polished, consistent web page, app interface, or brand visual system normally requires a professional designer and many revision rounds. This Skill structures the entire graphic design workflow—from brief confirmation to design system selection, asset sourcing, HTML/CSS authoring, and visual review—so non-designers get spec-compliant deliverables.

Core Features & Use Cases

  • Three Sub-Workflows: Full web/landing page design, app/product interface prototyping, and complete brand visual system construction, each with its own brief template and deliverables.
  • Built-in Design System Library: 14 well-known design systems (Stripe, Apple, Vercel, Linear, BMW, IBM, and more) with full 8-section specifications, matched to your style description via the design-full pick command; custom systems can also be imported.
  • Enforced Quality Gates: Mandatory brief confirmation before work begins, mandatory design system selection before coding, and mandatory visual model review (up to 3 revision rounds) before delivery.
  • Use Case: Ask for a landing page for a fintech product; the Skill creates a workspace, confirms the brief, matches the Stripe design system, downloads imagery, writes responsive HTML/CSS with design tokens, reviews the result visually, and archives the final files.

Quick Start

Ask the agent to design a landing page for your product and it will run design-full init to set up the workspace and walk you through brief confirmation.

Frequently Asked Questions about design-full

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

FAQPage Schema
How do I create a landing page with a consistent design system?▼

Run design-full init to create a task workspace, confirm the brief, then run design-full pick with a style description to match one of 14 built-in design systems. The Skill writes the selected system into DESIGN.md and generates responsive HTML/CSS following its tokens.

What design systems are included for web and app design?▼

The built-in library contains 14 systems including Stripe, Vercel, Linear, Notion, Apple, Supabase, Shopify, Figma, Spotify, Tesla, Framer, Airbnb, BMW, IBM, and Starbucks. Each has an 8-section specification covering color, typography, components, layout, depth, and responsive behavior.

Can I use a custom brand style instead of the built-in design systems?▼

Yes. You can describe a custom style or reference a brand, and the Skill generates a custom DESIGN.md in the standard 8-section format. You can also import systems from the VoltAgent/awesome-design-md repository into the design-systems directory.

Does the design workflow require user confirmation before coding?▼

Yes. Brief confirmation is a mandatory gate: the Skill writes requirements into brief.md and waits for explicit approval before selecting a design system or writing any HTML/CSS. A visual review gate also runs before final delivery.

What are the limitations of this design workflow?▼

It does not handle video production, which is delegated to other skills. Visual review is limited to a maximum of 3 revision rounds, and image assets depend on external sources like Pexels, Pixabay, or an image generation service.

Related Skills

Explore More Design & Creative Skills→
anxiety135790anxiety135790

claude-design

Create responsive HTML/CSS/JS design artifacts from briefs and repositories.

Community
Advanced
gooseworks-aigooseworks-ai
1.1k

content-asset-creator

Generate branded HTML content assets from structured data.

Official
Advanced
rhussrhuss
49

Visual Design

Coordinate mermaid diagrams, stock imagery, AI visuals, and accessible color palettes for presentation slides.

Community
Advanced
kvm9-devkvm9-dev

video-js

Generates short animated motion-graphics videos in the browser using React, Framer Motion, GSAP, and Three.js.

Community
Advanced