shpitto

Design-system enforcement contract for generated website UI. Use when creating or refining sections, pages, shells, forms, cards, tables, and navigation.

Defines the end-to-end website generation workflow. Invoke when generating multi-section pages or full websites.

Website-only import adapted from HTML Anything template discipline for cinematic AI/product launch pages with staged demo proof and sharp CTA focus.

Website-only import adapted from HTML Anything template discipline for resource hubs and information-platform routes.

Website-only import adapted from HTML Anything template discipline for documentation/reference pages. Default primary template discipline for docs and reference routes.

Website-only import adapted from HTML Anything template discipline for industrial product catalogs, spec comparison, and buyer inquiry routes.

Website-only import adapted from HTML Anything template discipline for premium portfolio/showcase sites with project-led openings and quiet luxury.

Website-only import adapted from Open Design patterns for bold marketing landings with strong motionless tension, proof cadence, and one decisive CTA.

Website-only import adapted from Open Design patterns for manifesto-like landings with sharp contrast, oversized type, and asymmetrical proof.

Website-only import adapted from Open Design patterns for resource hub, standards, research, and information-platform surfaces. Default primary seed for content-hub generation.

Website-only import adapted from Open Design patterns for documentation and knowledge-base surfaces. Default primary seed for docs/knowledge generation.

Website-only import adapted from Open Design patterns for editorial feature homepages and magazine-style portfolio/blog surfaces.

Website-only import adapted from Open Design patterns for precision manufacturing, procurement-facing product evidence, and industrial trust.

Website generation skill built on top of the awesome-design-md design library. This skill uses sequential page generation so design language, terminology, and navigation stay coherent across the whole site. Core value: - SKILL defines workflow, standards, and selection logic - TypeScript provides execution tools, loaders, and validators - Sequential generation preserves cross-page coherence Trigger conditions: - The user asks to create a website - The user asks to reference an existing website style - The user asks to use an existing design system

Deferred blog detail generation workflow. Use after the initial site pass to fill blog detail pages, align slugs and URLs, and prepare the site for custom-domain binding.

Type-specific generation contract for research, standards, information-platform, resource-library, and institutional content-hub websites.

Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Respects the active DESIGN.md color/typography/layout tokens. Trigger keywords: "saas landing", "marketing page", "product landing".

General-purpose desktop web prototype. Single self-contained HTML file built by copying the seed `assets/template.html` and pasting section layouts from `references/layouts.md`. Default for any landing / marketing / docs / SaaS page when no more specific skill matches.

Transform natural-language visual refinement requests into concrete edits for an existing static website. Use when users want to fine-tune an already generated or deployed website without rebuilding it, especially for visual polish, hierarchy, spacing, typography, color, content removal, or targeted UI behavior updates tied to current HTML/CSS/JS.

Type-specific generation contract for personal portfolio and blog websites. Use for resumes, creator sites, consultant profiles, and writing-led personal sites.

Type-specific generation contract for corporate and B2B company websites. Use for manufacturers, exporters, service firms, and enterprise-facing official websites.

Type-specific generation contract for documentation, reference, handbook, and knowledge-base websites.

Final delivery validation contract for generated websites, route units, and preview refinements.

A standalone pricing page — header, plan tiers, feature comparison table, and an FAQ. Use when the brief asks for "pricing", "plans", "subscription tiers", or a "compare plans" page.

Responsive layout contract for generated websites. Use when creating or refining any page, route, section, table, navigation shell, media block, or form.

Section-level quality contract for generated website pages. Use after creating or refining any visible section.

Mandatory visual QA contract for generated websites and refinements. Use before finalizing a page, route unit, or full site.

Top-level website orchestration contract. Use when a website generation task must classify the site type, produce a website design spec, and hand execution to a type-specific website generator.

Type-specific generation contract for marketing and product landing pages. Use for campaign pages, SaaS landing pages, and conversion-first single-product sites.

Admin / analytics dashboard in a single HTML file. Fixed left sidebar, top bar with user/search, main grid of KPI cards and one or two charts. Use when the brief asks for a "dashboard", "admin", "analytics", or "control panel" screen.

生成独特的、生产级的前端界面设计，专注于排版、颜色、运动和背景。 **核心原则:** - 排版：选择独特有趣的字体，避开通用字体 - 颜色：使用 CSS 变量保持一致性，主色配锐利强调色 - 运动：优先使用纯 CSS 动画，关注高影响时刻 - 背景：使用层叠渐变和几何图案创造氛围 **避免的 AI 美学:** - 过度使用的字体（Inter、Roboto、Arial） - 陈词滥调的配色（白底紫色渐变） - 可预测的布局模式 **激活方式:** - 命令: `/design` - 命令: `/frontend-design` - 上下文: 检测到前端设计需求时自动触发

实现 Manus-style 的持久化 markdown 规划工作流。 **核心原理:** - Context Window = RAM (volatile, limited) - Filesystem = Disk (persistent, unlimited) - 任何重要信息都要写入磁盘，而非塞入 context **3文件模式:** - task_plan.md - 跟踪阶段和进度 - findings.md - 存储研究和发现 - progress.md - 会话日志和测试结果 **触发条件:** - 多步骤任务（3+步骤） - 研究任务 - 构建/创建项目 - 跨越许多工具调用的复杂任务 **激活方式:** - 命令: `/planning-with-files` - 上下文: 检测到复杂任务规划需求时自动激活

Socratic 设计头脑风暴技能，帮助在编写代码前完善粗糙的想法。 **核心功能:** - 通过苏格拉底式提问探索问题本质 - 展示设计选项供用户验证 - 将模糊需求转化为具体规范 **触发条件:** - 任何需要设计决策的任务开始前 - 用户需求模糊或需要澄清 - 存在多种设计方案可选 **激活方式:** - 命令: `/superpowers:brainstorm` - 上下文: 检测到设计需求时自动触发

自主计划执行技能，支持两种执行模式： 1. Subagent-driven: 每个任务由子 agent 执行，两阶段审查 2. Batch execution: 批量执行带人工检查点 **核心功能:** - 任务分发和执行 - 两阶段审查（规范符合性 → 代码质量） - 阻塞关键问题防止继续 **触发条件:** - 实施计划已创建完成 - 需要自主执行复杂任务 **激活方式:** - 命令: `/superpowers:execute-plan` - 上下文: 计划编写完成后自动触发

详细实施计划编写技能，将设计分解为可执行的2-5分钟任务。 **核心功能:** - 将复杂任务分解为原子级子任务 - 每个任务包含精确的文件路径和完整代码 - 提供验证步骤确保正确实施 **触发条件:** - 设计阶段完成后需要实施计划 - 头脑风暴已确认方向 **激活方式:** - 命令: `/superpowers:write-plan` - 上下文: 设计确认后自动触发

网站图标库集成指南，提供 Lucide Icons 和 Heroicons 的使用规范和最佳实践

为网站生成匹配的 AI 图片资源，支持 hero images、section backgrounds、illustrations 等多种类型