home / skills / duc01226 / easyplatform / design-fast

design-fast skill

safe

This skill rapidly designs quick UI concepts by leveraging design intelligence data and implementing frontend-ready HTML/CSS/JS.

npx playbooks add skill duc01226/easyplatform --skill design-fast

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

1.8 KB

---
name: design-fast
description: "[Design & Content] Create a quick design"
argument-hint: [tasks]
infer: true
---

Think hard to plan & start working on these tasks follow the Orchestration Protocol, Core Responsibilities, Subagents Team and Development Rules:
<tasks>$ARGUMENTS</tasks>

## Required Skills (Priority Order)
1. **`ui-ux-pro-max`** - Design intelligence database (ALWAYS ACTIVATE FIRST)
2. **`frontend-design`** - Quick implementation

**Ensure token efficiency while maintaining high quality.**

## Workflow:
1. **FIRST**: Run `ui-ux-pro-max` searches to gather design intelligence:
   ```bash
   python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
   python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "<style-keywords>" --domain style
   python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "<mood>" --domain typography
   python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "<industry>" --domain color
   ```
2. Use `ui-ux-designer` subagent to start the design process.
3. If user doesn't specify, create the design in pure HTML/CSS/JS.
4. Report back to user with a summary of the changes and explain everything briefly, ask user to review the changes and approve them.
5. If user approves the changes, update the `./docs/design-guidelines.md` docs if needed.

## Notes:
- Remember that you have the capability to generate images, videos, edit images, etc. with `ai-multimodal` skills. Use them to create the design and real assets.
- Always review, analyze and double check generated assets with `ai-multimodal` skills to verify quality.
- Maintain and update `./docs/design-guidelines.md` docs if needed.

## IMPORTANT Task Planning Notes

- Always plan and break many small todo tasks
- Always add a final review todo task to review the works done at the end to find any fix or enhancement needed

Overview

This skill helps you create a quick, production-ready design by combining design intelligence and fast frontend implementation. It orchestrates search-driven inspiration, a lightweight design workflow, and a final review loop to deliver HTML/CSS/JS prototypes and assets quickly. The focus is on speed, token efficiency, and clear handoffs for review and iteration.

How this skill works

First, the skill runs targeted design intelligence searches to gather examples for product type, style, mood, industry, and typography. It then uses a UI/UX subagent to generate wireframes, visual directions, and quick HTML/CSS/JS implementations or multimodal assets as requested. Finally, it packages changes with a short summary, asks for user approval, and prepares documentation updates or a final review task for handoff.

When to use it

You need a rapid prototype or landing page to validate an idea.
You want curated design references and a fast HTML/CSS/JS mockup.
You need consistent visual direction for a small product feature.
You want generated assets (images, icons, videos) for a design deliverable.
You need a concise design summary to share with stakeholders for quick approval.

Best practices

Provide the product type, style keywords, mood, and industry to narrow searches.
Accept the default HTML/CSS/JS output for fastest delivery; request frameworks only if necessary.
Review the generated assets and run one final QA pass before approving.
Keep tasks small and incremental; the workflow creates many focused TODOs.
Approve changes explicitly to trigger documentation updates or final export.

Example use cases

Create a modern landing page mockup for a fintech product with clean typography and a muted color palette.
Produce a quick dashboard prototype showing a priority chart and user list in pure HTML/CSS/JS.
Generate hero images and icons for a marketing campaign, then embed them into a minimal page.
Iterate on a signup flow visual style using several reference searches and a final review task.
Convert a design direction into a lightweight, reviewable prototype for stakeholder sign-off.

FAQ

What formats will the design deliverables be in?

By default the skill outputs HTML/CSS/JS prototypes and image assets; other formats (Figma, SVGs, videos) can be produced on request.

How do I control the visual direction?

Provide product type, style keywords, mood, and industry at the start. The skill runs targeted searches and uses those signals to shape the design.