ce-frontend-design

Detect design systems and plan, build, and verify frontend interfaces.

2|Updated Apr 30, 2026

Search Tags:#typography #workflow #accessibility #verification #color #design-systems #frontend-design

Ready to run

npx skills add https://github.com/thisisryanswift/zellij-agent-tools --skill ce-frontend-design

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ce-frontend-design
Source: https://github.com/thisisryanswift/zellij-agent-tools/tree/main/.opencode/skills/ce-frontend-design
Command: npx skills add https://github.com/thisisryanswift/zellij-agent-tools --skill ce-frontend-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designer and developer teams waste time reconciling inconsistent frontend visuals across greenfield and legacy projects. This skill guides detection of existing design systems and provides a structured workflow to plan, build, and verify UI.

Core Features & Use Cases

Detect design tokens, variables, and conventions in the codebase and establish a cohesive design baseline.
Plan, implement, and visually verify frontend interfaces for landing pages, dashboards, admin panels, components, and interactive experiences while respecting existing patterns.
Verify results via screenshots, accessibility checks, and alignment with the design system, enabling quick iteration.

Quick Start

Analyze the current project to detect existing design signals, then plan and begin implementing a cohesive frontend design aligned with the detected system.

Frequently Asked Questions about ce-frontend-design

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

FAQPage Schema

How do I align new frontend designs with an existing design system?▼

Align new frontend designs by detecting existing design tokens and variables in a codebase to establish a cohesive baseline. This ensures new UI components and layouts adhere to current typography, color, and accessibility conventions.

What is the best workflow for building landing pages and dashboards while respecting existing design patterns?▼

The best workflow for building interfaces involves planning, implementing, and visually verifying frontend designs against detected design tokens. This structured process ensures landing pages and dashboards maintain system consistency and accessibility standards.

Can I use this frontend design workflow for greenfield projects and migrations?▼

Yes, this frontend design workflow supports both greenfield projects and legacy migrations. It identifies existing design signals to build a cohesive baseline, allowing you to apply production-grade design patterns across various project stages.

How do I verify accessibility and visual alignment in frontend components?▼

Verify accessibility and visual alignment by checking screenshots and validating UI components against the established design system. This enables quick iteration and ensures frontend interfaces meet required accessibility and layout standards.

Does this frontend design process work across multiple frameworks?▼

Yes, the frontend design process is applicable across frameworks. It guides the planning, building, and validation of UI components by detecting and applying existing design system conventions regardless of the specific framework used.