An expert frontend design skill that guides AI agents to construct high-quality, production-grade web interfaces and components that avoid generic AI aesthetics.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install phy-frontend-design
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install phy-frontend-design using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Frontend Design?
The frontend-design skill is a powerful extension designed to guide AI agents in creating production-ready, beautiful, and highly memorable user interfaces. Rather than relying on standard, cookie-cutter templates that yield flat "AI slop" aesthetics, this skill prompts the model to make intentional, bold design choices across typography, composition, and motion.
By leveraging this tool inside the Openclaw Skills ecosystem, developers can effortlessly direct AI agents to build stunning landing pages, interactive dashboards, and creative React components. Whether you desire brutally minimal layouts or maximalist designs filled with gradient meshes and noise overlays, this skill ensures the output feels hand-designed, highly functional, and optimized for modern web standards.
Frontend Design Use Cases
- Developing unique portfolio websites or product landing pages that stand out.
- Injecting custom branding, unique typography, and asymmetric layouts into standard React components.
- Building immersive web applications with custom cursors, grain overlays, and motion animations.
- Transforming bland mockups and standard components into high-fidelity, production-grade frontend assets.
How Frontend Design Works
- Context Analysis: The AI agent evaluates your project requirements, user constraints, and target audience to define a concrete, bold aesthetic.
- Aesthetic Commitment: A specific design tone is chosen (such as retro-futuristic, industrial-utilitarian, or editorial) to avoid generic default aesthetics.
- Visual Layout Generation: The agent designs an asymmetric, grid-breaking, or beautifully balanced layout utilizing negative space and depth.
- Refined Code Assembly: Production-ready code (HTML/CSS, React, Vue, etc.) is generated with custom CSS variables, fine-tuned typography pairings, and micro-interactions.
Frontend Design Setup
To integrate the frontend-design skill into your AI agent configuration, you can declare it as a prompt template or system guideline. Copy the SKILL.md rules into your custom agent's system prompt or configuration folder:
# Clone your Openclaw Skills workspace
git clone https://github.com/PHY041/openclaw-skills-repo.git
cd openclaw-skills-repo
# Reference the frontend-design markdown file in your AI agent config
cp skills/frontend-design.md ~/.config/ai-agents/skills/
Frontend Design Data Schema & Taxonomy
The skill operates on clean, production-grade file structures and adheres to strict design token metadata:
| File Type / Output | Structure & Details |
|---|---|
| React Components | Structured as functional .jsx or .tsx files utilizing custom or inline modular CSS and Tailwind classes. |
| Static UI Assets | Independent .html and .css files with embedded or linked responsive design layouts. |
| Typography Config | Inline imports or CSS variables defining distinct display and body font pairings (e.g., bypassing Inter/Arial for unique display typefaces). |
| Animation Systems | Inline CSS animations or React Motion components configured for staggered, scroll-triggered page reveals. |
Frontend Design Advanced Features
- Custom Motion Configurations: Staggered page-load reveals and micro-interactions using native CSS or dedicated Motion libraries.
- Depth and Atmosphere Overlays: Real-time styling injections for custom textures, gradient meshes, noise layers, and grain overlays.
- Grid-Breaking Layouts: Support for asymmetrical alignments, overlapping elements, and custom diagonal flow compositions.
- Dynamic Typography Pairings: Automatic styling pairings that replace generic system fonts with high-character alternative typefaces.
SKILL.md
Loading
Related Openclaw Skills
Deep Research
A structured, parallel-first research skill that enables AI agents to decompose complex queries, execute concurrent searches, and synthesize high-confidence answers.
NotebookLM Research Assistant
An automated browser-driven skill that bridges Claude Code and Google NotebookLM to query your documents and retrieve citation-backed Gemini answers.
Accessibility (A11y) Reviewer
An AI-powered web accessibility reviewer that automatically audits web pages and code structures against WCAG 2.2 AA compliance standards.
UI Reviewer
An AI-powered frontend code reviewer that automates design system compliance, structural audits, responsiveness checks, and visual consistency for React and Vue applications.
Content Compound
An automated content atom library builder that scans past content to extract reusable ideas, claims, and data points, eliminating blank-page creator burnout.
Platform Rules Engine
A local, zero-dependency Python CLI tool that scans social media drafts against 30+ algorithmic rules to prevent shadowbans, link penalties, and downranking.
Featured*
