ce-frontend-design

Detect existing design systems and guide web interface creation with visual verification.

Updated Apr 28, 2026
One-click install
npx skills add https://github.com/Zeptiny/opencode-setup --skill ce-frontend-design-zeptiny
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ce-frontend-design
Source: https://github.com/Zeptiny/opencode-setup/tree/main/skills/ce-frontend-design
Command: npx skills add https://github.com/Zeptiny/opencode-setup --skill ce-frontend-design-zeptiny

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenge of designing production-grade web interfaces that maintain design integrity and avoid generic AI aesthetics, providing a structured approach to frontend design.

Core Features & Use Cases

  • Design System Detection: Identifies existing design systems and respects them.
  • Comprehensive Guidance: Offers detailed guidance on typography, color, composition, motion, and copy.
  • Visual Verification: Ensures design quality through visual checks and screenshots.
  • Contextual Design Modules: Provides specific design modules for landing pages, apps, dashboards, and components.

Quick Start

Run the ce-frontend-design skill to start designing a new web interface.

Frequently Asked Questions about ce-frontend-design

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

FAQPage Schema
How do I avoid generic AI aesthetics when creating web interfaces?

To avoid generic AI aesthetics in web interfaces, this Skill guides you through design integrity principles, detecting existing design systems and enforcing visual quality checks using screenshots to ensure production-grade results.

How do I maintain design integrity when developing a frontend interface?

You maintain design integrity by detecting existing design systems and applying comprehensive guidance on typography, color, composition, and motion. This Skill visually verifies the frontend interface through screenshots to ensure quality.

Does this frontend design Skill respect my existing UI/UX design system?

Yes, this frontend design Skill includes design system detection. It identifies your existing UI/UX design system and respects it while providing contextual design modules for landing pages, apps, and dashboards.

What is the best way to structure a landing page interface with design principles?

The best way to structure a landing page interface is by using contextual design modules. This Skill provides specific guidance for landing pages, apps, dashboards, and components, covering typography, color, composition, and copy.

Why does my generated web interface lack visual quality?

Your web interface may lack visual quality if it bypasses design verification. This Skill resolves this by applying comprehensive design principles and performing visual checks through screenshots to ensure high-quality frontend results.

Do I need frontend development knowledge to use this interface design Skill?

Yes, you need an understanding of design principles and frontend technologies. This Skill applies to frontend development workflows, guiding the creation of high-quality web interfaces by enforcing design integrity.