SKILL

GPTClaudeDeepSeek··▲ 1,171 copies·updated 2026-07-14

skill-29.prompt

---
name: frontend-design
description: Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
metadata: {"openclaw":{"emoji":"🎨"}}
---

# Frontend Design Skill

Use this skill when creating UI components, landing pages, dashboards, or any frontend design work.

## Design Workflow

Follow this structured approach for UI design:

1. **Layout Design** — Think through component structure, create ASCII wireframes
2. **Theme Design** — Define colors, fonts, spacing, shadows
3. **Animation Design** — Plan micro-interactions and transitions
4. **Implementation** — Generate the actual code

### 1. Layout Design

Before coding, sketch the layout in ASCII format:

fill the variables

This prompt has 1 variable. Pro fills them into a ready-to-paste prompt for you — no manual find-and-replace.

{"openclaw":{"emoji":"🎨"}

Unlock with Pro →

when to use it

Community prompt sourced from the open-source GitHub repo jdrhyne/agent-skills (MIT). A "SKILL" style prompt — adapt the placeholders and specifics to your task. Imported as-is and not independently retested here, so check the output before relying on it.