Communitygithub.com

everyinc/ce-frontend-design

AIにありがちな凡庸なデザインではなく、本物の品質を備えたWebインターフェースを構築します。ランディングページ、Webアプリ、ダッシュボード、管理パネル、コンポーネント、インタラクティブな体験など、あらゆるフロントエンド作業に使用できます。新規開発と既存アプリケーションの変更の両方に対応します。既存のデザインシステムを検出して尊重し、構成、タイポグラフィ、カラー、モーション、コピーライティングをカバーします。完了と宣言する前にスクリーンショットで結果を検証します。

ce-frontend-design とは？

このスキルは、AIエージェント（Claude Code、Cursor、Codexなど）がフロントエンド開発において、単なるコード生成を超えた、人間レベルのデザイン品質を実現するための包括的なガイドです。ランディングページから複雑なWebアプリ、ダッシュボード、管理パネル、インタラクティブなUIコンポーネントまで、あらゆる規模のプロジェクトに対応します。既存のデザインシステムを自動的に検出し、そのルール（カラー、タイポグラフィ、間隔など）を尊重しながら、新規開発と既存アプリケーションの変更の両方にシームレスに適応します。スキルは、構成（レイアウトと階層）、タイポグラフィ（フォントの選択とスケーリング）、カラー（パレットとコントラスト）、モーション（アニメーションとトランジション）、コピーライティング（UIテキストの品質）の5つの主要なデザイン領域をカバーしています。特に重要なのは、タスク完了前にスクリーンショットをキャプチャして視覚的に結果を検証するプロセスであり、これにより「AIスロップ」と呼ばれる品質の低い出力を防止します。エージェントはこのスキルを使用して、美しく、ユーザビリティが高く、一貫性のあるインターフェースを構築することができます。

対応~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/everyinc/compound-engineering-plugin/tree/main/skills/ce-frontend-design
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

ce-frontend-design は何をしますか？

AIにありがちな凡庸なデザインではなく、本物の品質を備えたWebインターフェースを構築します。ランディングページ、Webアプリ、ダッシュボード、管理パネル、コンポーネント、インタラクティブな体験など、あらゆるフロントエンド作業に使用できます。新規開発と既存アプリケーションの変更の両方に対応します。既存のデザインシステムを検出して尊重し、構成、タイポグラフィ、カラー、モーション、コピーライティングをカバーします。完了と宣言する前にスクリーンショットで結果を検証します。

対象

このスキルは以下のようなフロントエンドワークに最適です：

  • ランディングページ
  • Webアプリケーション
  • ダッシュボード
  • 管理パネル
  • UIコンポーネント
  • インタラクティブな体験

使用方法

  1. プロンプトでフロントエンドタスクを依頼するだけで、このスキルが自動的に有効になります。
  2. エージェントがプロジェクトの既存のデザインシステムを検出し、尊重します。
  3. 設計上の判断は構成、タイポグラフィ、カラー、モーション、コピーライティングの原則に基づいて行われます。
  4. 作業完了前に、エージェントがスクリーンショットをキャプチャして結果を検証します。

サポートされるプラットフォーム

  • Claude Code
  • Cursor
  • Codex
  • その他のAIエージェント

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

everyinc/ce-agent-native-architecture

Build applications where agents are first-class citizens. Use this skill when designing autonomous agents, creating MCP tools, implementing self-modifying systems, or building apps where features are outcomes achieved by agents operating in a loop.

everyinc/ce-agent-native-audit

Run comprehensive agent-native architecture review with scored principles

everyinc/ce-brainstorm

Explore requirements and approaches through collaborative dialogue, then write a right-sized requirements document. Use when the user says "let's brainstorm", "what should we build", or "help me think through X", presents a vague or ambitious feature request, or seems unsure about scope or direction -- even without explicitly asking to brainstorm.

everyinc/ce-clean-gone-branches

Clean up local branches whose remote tracking branch is gone. Use when the user says "clean up branches", "delete gone branches", "prune local branches", "clean gone", or wants to remove stale local branches that no longer exist on the remote. Also handles removing associated worktrees for branches that have them.

everyinc/ce-code-review

Structured code review using tiered persona agents, confidence-gated findings, and a merge/dedup pipeline. In interactive mode it applies safe, verified fixes and commits them when the working tree is clean (it never pushes); in mode:agent it reports only and the caller applies. Use when reviewing code changes before creating a PR.

everyinc/ce-commit

Create a git commit with a clear, value-communicating message. Use when the user says "commit", "commit this", "save my changes", "create a commit", or wants to commit staged or unstaged work. Produces well-structured commit messages that follow repo conventions when they exist, and defaults to conventional commit format otherwise.

everyinc/ce-commit-push-pr

Commit, push, and open a PR with an adaptive, value-first description that scales in depth with the change. Use when the user says "commit and PR", "ship this", "create a PR", or "open a pull request". Also handles description-only flows ("write a PR description", "rewrite the PR body", "describe this PR") without committing or pushing.

everyinc/ce-compound

Document a recently solved problem to compound your team's knowledge or CONCEPTS.md, the project's shared domain vocabulary.

everyinc/ce-compound-refresh

Refresh stale learning and pattern docs under docs/solutions/ by reviewing them against the current codebase, then updating, consolidating, or deleting drifted ones. Use when the user asks to "refresh my learnings", "audit docs/solutions/", "clean up stale learnings", or "consolidate overlapping docs", or when ce-compound flags an older doc as superseded. Do not trigger for general refactor, debugging, or code-review work unless the user has explicitly pointed at docs/solutions/.

everyinc/ce-debug

Systematically find root causes and fix bugs. Use when debugging errors, investigating test failures, reproducing bugs from issue trackers (GitHub, Linear, Jira), or when stuck on a problem after failed fix attempts. Also use when the user says 'debug this', 'why is this failing', 'fix this bug', 'trace this error', or pastes stack traces, error messages, or issue references.

everyinc/ce-demo-reel

Capture a visual demo reel (GIF, terminal recording, screenshots) for PR descriptions. Use when shipping UI changes, CLI features, or any work with observable behavior that benefits from visual proof. Also use when asked to add a demo, record a GIF, screenshot a feature, show what changed visually, create a demo reel, capture evidence, add proof to a PR, or create a before/after comparison.

everyinc/ce-dhh-rails-style

This skill should be used when writing Ruby and Rails code in DHH's distinctive 37signals style. It applies when writing Ruby code, Rails applications, creating models, controllers, or any Ruby file. Triggers on Ruby/Rails code generation, refactoring requests, code review, or when the user mentions DHH, 37signals, Basecamp, HEY, or Campfire style. Embodies REST purity, fat models, thin controllers, Current attributes, Hotwire patterns, and the "clarity over cleverness" philosophy.

everyinc/ce-doc-review

Review requirements or plan documents using parallel persona agents that surface role-specific issues. Use when a requirements document or plan document exists and the user wants to improve it.

everyinc/ce-gemini-imagegen

This skill should be used when generating and editing images using the Gemini API (Nano Banana Pro). It applies when creating images from text prompts, editing existing images, applying style transfers, generating logos with text, creating stickers, product mockups, or any image generation/manipulation task. Supports text-to-image, image editing, multi-turn refinement, and composition from multiple reference images.

everyinc/ce-ideate

Generate and critically evaluate grounded ideas about a topic. Use when asking what to improve, requesting idea generation, exploring surprising directions, or wanting the AI to proactively suggest strong options before brainstorming one in depth. Triggers on phrases like 'what should I improve', 'give me ideas', 'ideate on X', 'surprise me', 'what would you change', or any request for AI-generated suggestions rather than refining the user's own idea.

everyinc/ce-optimize

Run metric-driven iterative optimization loops -- define a measurable goal, run parallel experiments, measure each against hard gates or LLM-as-judge scores, keep improvements, and converge on the best solution. Use when optimizing clustering quality, search relevance, build performance, prompt quality, or any measurable outcome that benefits from systematic experimentation.

everyinc/ce-plan

Create structured plans for multi-step tasks -- software features, research workflows, events, study plans, or any goal that benefits from breakdown. Also deepens existing plans with interactive sub-agent review. Use when the user says 'plan this', 'create a plan', 'how should we build', 'break this down', or when a brainstorm doc is ready for planning. Use 'deepen the plan' or 'deepening pass' for the deepening flow. For exploratory requests, prefer ce-brainstorm first.

everyinc/ce-polish-beta

[BETA] Start the dev server, open the feature in a browser, and iterate on improvements together.

everyinc/ce-product-pulse

Generate a time-windowed pulse report on what users experienced and how the product performed - usage, quality, errors, signals worth investigating. Use when the user says 'run a pulse', 'show me the pulse', 'how are we doing', 'weekly recap', 'launch-day check', or passes a time window like '24h' or '7d'. Configures via .compound-engineering/config.local.yaml and saves reports to docs/pulse-reports/.

everyinc/ce-proof

Publish, view, comment on, and edit markdown via Proof (proofeditor.ai) — create a shareable doc, read a shared doc, and make comment/suggestion/block edits over its API. Use when the user says "view this in proof", "share to proof", "publish to proof", or wants a shareable markdown surface for a spec, plan, or draft, including publish handoffs from ce-brainstorm, ce-ideate, or ce-plan. Do not trigger on "proof" meaning evidence, math proofs, proof-of-concept, or "proofread this".

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community