home / skills / duc01226 / easyplatform / design-good

design-good skill

This skill designs immersive, award-winning UI by researching trends and implementing visuals in HTML/CSS/JS, delivering polished, responsive interfaces.

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

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

Files (1)

SKILL.md

2.4 KB

---
name: design-good
description: "[Design & Content] Create an immersive 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`** - Screenshot analysis and design replication

**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 `researcher` subagent to research about design style, trends, fonts, colors, border, spacing, elements' positions, etc.
3. Use `ui-ux-designer` subagent to implement the design step by step based on the research.
4. If user doesn't specify, create the design in pure HTML/CSS/JS.
5. Report back to user with a summary of the changes and explain everything briefly, ask user to review the changes and approve them.
6. If user approves the changes, update the `./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

## Important Notes:
- **ALWAYS REMEMBER that you have the skills of a top-tier UI/UX Designer who won a lot of awards on Dribbble, Behance, Awwwards, Mobbin, TheFWA.**
- Remember that you have the capability to generate images, videos, edit images, etc. with `ai-multimodal` skills for image generation. Use them to create the design with real assets.
- Always review, analyze and double check the generated assets with `ai-multimodal` skills to verify quality.
- Use removal background tools to remove background from generated assets if needed.
- Create storytelling designs, immersive 3D experiences, micro-interactions, and interactive interfaces.
- Maintain and update `./docs/design-guidelines.md` docs if needed.

Overview

This skill creates immersive, production-ready UI and content designs by orchestrating specialized design subagents and research tools. It always activates the design intelligence database first, then analyzes screenshots, trends, and assets to produce polished HTML/CSS/JS prototypes and visual assets. The outcome is a reviewable, documented design package ready for iteration or handoff.

How this skill works

First, the skill queries the ui-ux-pro-max intelligence to gather style, product, typography, and color insights relevant to the brief. It then runs targeted research to extract spacing, border, layout, and interaction patterns and hands those findings to a ui-ux-designer subagent for stepwise implementation. The system generates assets and prototypes (defaulting to HTML/CSS/JS), uses ai-multimodal tools to create and validate imagery, and assembles a concise change summary and review checklist for the user.

When to use it

You need a fast, researched visual concept for a product or landing page.
You want designs grounded in current trends and proven UI patterns.
You need screenshot analysis and accurate replication of visual style.
You require prototype-ready HTML/CSS/JS with assets included.
You want documented design decisions and a review-ready checklist.

Best practices

Always provide a clear product type, target audience, and style keywords to focus research.
Approve the initial research findings before full implementation to reduce rework.
Request generated assets in vector or transparent formats when you need flexible reuse.
Use small iterative reviews after each implementation milestone rather than one large review.
Keep accessibility and responsiveness as default constraints; ask for deviations explicitly.

Example use cases

Design a marketing landing page informed by market and style research with a prototype and asset pack.
Replicate and modernize a screenshot or legacy UI into a responsive HTML/CSS prototype.
Create an immersive hero with storytelling imagery, 3D elements, and micro-interactions for a product demo.
Generate a design guideline summary and prototype for handoff to frontend engineers.
Produce polished marketing assets with background removal and validated color/typography choices.

FAQ

What deliverables will I receive?

You get a prototype (HTML/CSS/JS by default), generated imagery and assets, a concise summary of changes, and a review checklist with suggested next steps.

Can you work in frameworks instead of plain HTML/CSS/JS?

Yes — specify your preferred framework (React, Vue, etc.) and the skill will implement the prototype accordingly.

How is quality validated for generated images?

The skill uses ai-multimodal verification and background-removal tools to check composition, resolution, and consistency before delivery.