菜单
Use when designing the Maycrest website or TIE Platform — building pages, components, or dashboards, choosing fonts and colors, applying the brand aesthetic, or seeking web design inspiration.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when an approved Maycrest spec needs turning into a bite-sized TDD implementation plan a contractor could execute cold — before any code is touched on a client build.
Use when the Maycrest deliver pipeline executes an implementation plan of independent tasks in the current session — one fresh subagent per task, two-stage review each.
Use when a Maycrest build hits any bug, test failure, or unexpected behavior on the Expo/Supabase/Vercel stack — before proposing any fix.
Use when review feedback lands on a Maycrest deliverable — before implementing any suggestion, especially an unclear or questionable one — demanding verification over performative agreement.
Use when completing a task or major feature on a Maycrest build, or before merging — dispatch an independent reviewer subagent as the internal QA gate before the client sees the work.
Use when a Maycrest engagement branch is complete and tests pass — gating the handoff: verify the suite first, then choose merge, PR, keep, or discard, and produce a short client handoff package.
| name | maycrest-web-design |
| description | Use when designing the Maycrest website or TIE Platform — building pages, components, or dashboards, choosing fonts and colors, applying the brand aesthetic, or seeking web design inspiration. |
Design system and web design strategy for Maycrest — an Agentic-Enabled Managed Intelligence Provider serving SMBs in Indianapolis. Three service arms: Creative Services, AI Solutions, and Cybersecurity.
Primary: #0A0F1C (Deep Navy — backgrounds)
Secondary: #1A1F35 (Elevated surfaces)
Accent: #00D4AA (Cyber Teal — CTAs, highlights)
Accent Alt: #7B61FF (Electric Purple — AI/innovation)
Warning: #FF6B35 (Alert Orange — security)
Text Primary: #F0F0F5 (Near white)
Text Secondary: #8A8FA3 (Muted)
Surface: #12172B (Cards, panels)
Border: #2A2F45 (Subtle dividers)
Each follows: Hero → Problem → Solution → Features → Case Study → CTA
Maycrest should look NOTHING like:
Maycrest should feel like:
The Maycrest Digital website has a comprehensive DESIGN.md file at the repo root (website/DESIGN.md) that codifies the entire design system in the Google Stitch 9-section format. This file is the single source of truth for AI coding agents when generating UI.
When building or modifying Maycrest web pages:
DESIGN.md for exact token values (colors, typography, spacing, shadows, motion).observation-window → .glass-card → .intel-card → .story-card → .cta-cardKey DESIGN.md specifics not in this skill:
clamp() (not fixed px values).section-hero, .section-feature, .section-proof, .section-cta)The maycrest-create:design-system-architect skill owns DESIGN.md creation and auditing.
DESIGN.md for exact implementation values when building components