本文へ移動
cccskills
無料GitHub で公開

website-design-system-architect

Create or evolve an implementation-agnostic website design system from existing-site evidence, verified brand inputs, and an optional Visual Reference Brief. Use to establish visual and restrained-motion baselines, extract an existing site's rendered system for style-preserving extensions, validate one selected baseline with a compact Design Board, or update shared rules before page/module design. Do not conduct cross-industry reference research, map Elementor settings, create page layouts, design modules, or implement production code.

インストール方法を見る

含まれるファイル(14)

  • SKILL.md5.3 KB
  • agents/interface.yaml1.0 KB
  • assets/b2b-design-board-reference.html10.1 KB
  • evals/research-cases.md7.3 KB
  • evals/semantic_config.json846 B
  • evals/trigger_cases.json1.0 KB
  • references/browser-research.md2.6 KB
  • references/design-board-pattern.md4.0 KB
  • references/design-review.md3.4 KB
  • references/design-system-standard.md7.8 KB
  • references/existing-site-workflow.md5.8 KB
  • references/motion-system-standard.md3.7 KB
  • references/new-site-workflow.md6.1 KB
  • references/visual-system-principles.md4.4 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Website Design System Architect

先提出文字方向,再把用户选中的方向整理成临时规则草稿;用单方向 Design Board 验证规则,确认后才写入可继续演进的正式 Design System。

标准生命周期

品牌输入 + 按需的 Visual Reference Brief
→ 2–3 个文字方向
→ 用户选择一个方向
→ 对话中形成 Design System 规则草稿
→ 生成单方向 Design Board
→ 设计师视角自查并自动修正一轮明确问题
→ 用户查看、微调并确认
→ 写入 Active Baseline Design System
→ 一致性与可用性自查并自动修正一轮明确问题
→ 页面实践中按需受控更新
→ 受影响页面重新验证

临时规则草稿只保留在对话中,不创建 design-system-draft.md。Design Board 是规则的可视化验证工具,不是页面设计稿、模块方案或组件大全。

统一使用名称 Design Board;为兼容既有项目,文件路径仍保留为 设计稿/design-system/style-board.html。

路由

  1. 先判断任务:
    • New Site:无可靠现站视觉基线,读取 New Site 工作流。
    • Existing Site:已有线上站、主题或页面视觉,且用户希望保留或规范其风格,读取 Existing Site 工作流。
    • Rebuild:虽有旧站,但用户明确从零重建设计时按 New Site 处理;旧站只作经确认的内容或参考证据,不自动成为视觉权威。
  2. New Site / Rebuild 只选择性读取适用 Visual Reference Brief 的 Art Direction、Visual System / DESIGN.md 与迁移边界;需要跨行业研究但简报缺失时返回总控并路由 website-reference-researcher,已有简报时不重复研究。Existing Site 的本体提炼仍按现有站证据工作。
  3. Existing Site 涉及网页证据采集时,读取 共享浏览器研究协议。
  4. 两条路径都遵守 Design System 标准;形成临时规则草稿、生成 Design Board 或处理共享视觉规则时读取 视觉系统原则。建立或提炼跨页面动效基线时同时读取 Motion System Standard。
  5. 生成 Design Board 时读取 B2B Design Board 默认模式。
  6. 交付 Design Board 或 Active Baseline 前读取并执行 设计师自查,并用视觉系统原则验证色彩角色、明度、饱和度、排版、空间、Surface 与组件状态是否形成同一语言。
  7. 当 website-html-prototyper 提交 D 类系统问题时,核对它是否在多个位置重复出现且根因属于共享规则;成立时只更新受影响 token、语义角色或共享规则,记录渲染证据和影响范围,再交回原页面复验。单页例外不修改全局系统。

强制门禁

  1. 条件触发 website-reference-researcher 时,其候选名单必须先确认;本 Skill 不自行建立第二套名单或重复深度研究。
  2. 未提供并确认文字方向,不生成 Design Board。
  3. 用户未选择方向,不整理临时规则草稿。
  4. Design Board 只展示一个已选方向,只验证基础规则与基础组件。
  5. 用户未确认 Design Board,不生成正式 design-system.md。
  6. 正式文件标记为 Active Baseline,不是不可修改的终稿。

设计师自查不是门禁状态或实现 QA:不检查响应式、溢出、浏览器兼容与生产实现,也不输出验收等级。它只用于发现设计语言、组件示例与正式规则中的明显瑕疵;明确问题最多自动修正一轮,主观方向仍交给用户决定。

职责边界

  • 本 Skill 定义基础视觉语言、基础组件规则,以及正式 Design System 中的平台中立媒体、响应式、Motion Foundation 与可访问性基线;不决定页面或 Section 的具体动画。
  • 本 Skill 记录 Style Authority Intent 与可追溯视觉证据,但不把公开页面观察伪装成 Elementor Global Token,也不输出平台设置映射。
  • website-ui-architect 负责页面构图、模块表达、页面级视觉节奏和视觉方向确认;website-html-prototyper 负责模块/整页 HTML 与实现 QA。
  • elementor-site-style-adapter 在需要 Elementor 实现时把已确认 Design System 映射为 Site Settings 与 Widget 继承契约。
  • 实现 Skill 负责平台字段、模板、CSS、JS 和验收。
  • Form 默认由插件负责,不进入首版基础组件规则;只有用户明确要求统一定制时才补充。
  • 禁止在本文档中写平台专属控件、Widget slug、PHP 类名或 CSS selector。

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Initialize a local custom Elementor Widget plugin, design handoff workspace, and pending site-style context, choosing a Flat or Grouped plugin structure from expected Widget scale. Use once before the first custom Widget when no plugin scaffold exists; theme context is optional and read-only. Do not map Elementor Site Settings, design visuals, implement Widgets, deploy, or inspect a live WordPress installation.

日本語の概要は準備中です。原文の説明を表示しています。

javen-wangjunren/elementor-website-skill332026年9月14日 更新

Map a confirmed platform-neutral website Design System to a local Elementor Site Settings and Widget inheritance contract. Use for a new or rebuilt Elementor site that needs Global Style setup guidance, or an existing site that must preserve its current visual system. Do not redesign the site, implement Widgets, or modify WordPress, Elementor, themes, or remote data.

日本語の概要は準備中です。原文の説明を表示しています。

javen-wangjunren/elementor-website-skill332026年9月14日 更新

Coordinate the custom Elementor Widget site workflow for kickoff, lightweight company intake, conditional reference research, new-versus-existing site style routing, uncertain next steps, project resumption, or continuous work across content, Design Systems, UI, HTML, and Widget implementation. Do not use for release, old-Widget troubleshooting, theme development, or remote WordPress management.

日本語の概要は準備中です。原文の説明を表示しています。

javen-wangjunren/elementor-website-skill332026年9月14日 更新

把确认版模块 HTML、整页 HTML 中指定的 Section,或既有 Elementor 页面中用户明确批准的简单强参考模块,以克制字段实现为插件式 Elementor Widget。用于新增或迁移单个已确认 Widget;不用于设计探索、复杂参考图直做、批量整页实现、旧 Widget 排错、主题开发或发布。

日本語の概要は準備中です。原文の説明を表示しています。

javen-wangjunren/elementor-website-skill332026年9月14日 更新

Build, review, and browser-test interactive website page or module HTML from a confirmed UI Architecture Map and visual direction. Use for HTML First Drafts, restrained motion implementation, full-page or module-first prototypes, rendered design review, responsive and interaction QA, page composition, and implementation handoff. Do not use for design exploration, unconfirmed visual or motion direction, content strategy, Design Systems, Elementor controls, CMS templates, or framework components.

日本語の概要は準備中です。原文の説明を表示しています。

javen-wangjunren/elementor-website-skill332026年9月14日 更新

Create or audit a complete, concise, UI-ready website page content framework from verified business facts before visual design. Use to define page goals, customer decision flow, section order, realistic draft copy, content and evidence needs, CTAs, or page-family rules; do not use for visual design, HTML, SEO implementation, or platform code.

日本語の概要は準備中です。原文の説明を表示しています。

javen-wangjunren/elementor-website-skill332026年9月14日 更新

javen-wangjunren のスキルをすべて見る

このスキルの問題を報告する