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

website-ui-architect

Design and visually validate implementation-agnostic website pages or modules from an approved Design System and confirmed content. Use for Module Design Solutions, Page UI Architecture Maps, media, evidence, page motion budgets, section motion intent, visual-direction images, and direction review before HTML. Do not use to write or review HTML/CSS/JS, run browser implementation QA, plan platform fields, or implement CMS components.

javen-wangjunren/elementor-website-skill
インストール方法を見る

含まれるファイル（14）

  • SKILL.md6.4 KB
  • agents/interface.yaml1.2 KB
  • evals/design-workflow-cases.md10.2 KB
  • evals/semantic_config.json1.5 KB
  • evals/trigger_cases.json1.5 KB
  • references/design-exploration.md4.0 KB
  • references/evidence-led-design.md1.3 KB
  • references/layout-composition-principles.md6.0 KB
  • references/module-design-review.md9.6 KB
  • references/module-naming.md949 B
  • references/motion-intent-contract.md4.1 KB
  • references/page-ui-architecture-map.md9.4 KB
  • references/visual-direction.md6.8 KB
  • scripts/compose_segments.py2.5 KB

SKILL.md（原文）

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

Website UI Architect

把已确认的页面内容与视觉规则转化为经视觉验证的 UI 设计方案。本 Skill 在视觉方向确认后结束，不编写 HTML。

输入与上游

  • 完整页面必须读取已确认的 docs/design-system/design-system.md 和 docs/page-content/<page-slug>.md；缺失时分别返回 website-design-system-architect 或 website-page-content-architect。
  • 单模块在真实内容、页面上下文和 Design System 同等明确时可不要求整页 Page Content。
  • 按需读取 Style Board、真实素材、截图、URL、Figma、现有渲染和相邻 Section；不默认扫描全项目。
  • 按需读取适用的 docs/research/*-visual-reference-brief.md，且只消费 Page / Module Architecture、媒体策略与响应式迁移原则。已有简报时不重复研究原始案例。
  • Design System 是视觉规则来源，Page Content 是业务事实与文案来源，Visual Reference Brief 只是构图参考证据，不能覆盖前两者。

唯一流程

  1. 提取 Section Job、客户问题、真实内容与证据、页面上下文和品牌约束；检查是否有适用 Visual Reference Brief，并只提取本 Skill 负责的字段。
  2. 每个 Section 先读取 布局与构图原则，再完成紧凑的 Module Design Solution，包含沟通目标、信息层级、证据归属、扫读路径、视觉叙事、UI Composition、响应式叙事、禁止方案和成功标准，最后根据任务、内容关系和认知成本确定 Layout。媒体 Section 同时完成 Media Display Contract；按 Motion Intent Contract 做轻量机会检查，只有用户提出动态需求或确有帮助理解的可选建议时才记录，普通 Section 不追加 Motion 字段。
  3. 完整页面写入 Page UI Architecture Map，执行 Module Solution Qualification、Media Fitness 与 Motion Fitness Review，明确问题自动修正一轮后交给用户确认。Motion 建议随 Map 原门禁一起确认，不新增门禁；只有确认采用显式 Layer 2/3 时才形成 Page Motion Budget 与 Section Motion Intent。单模块可使用同等明确的 Brief。
  4. 从确认 Map 按叙事关系编译 Segment 提示词；通常每张覆盖 2–4 个 Section，复杂 Section 可独占一张。生图前先告知预计数量、Section 范围与文件名；每个 Segment 默认只生成一个候选，不生成 AI Overview。
  5. 对方向稿分别执行 Structure Fidelity 与 Visual Language Review，再检查 Solution、Map 和 Media Fidelity。A 类问题先报告并停止生图；用户确认修正后只生成受影响 Section 的 Correction Direction。B 类写入 HTML Correction Notes；C 类噪声不阻塞确认。
  6. 用户确认视觉方向后生成 Canonical Module Slug，交付确认的视觉设计包。原始目标包含 HTML 时，在同一任务中继续采用 website-html-prototyper，不要求用户重新调用 Skill。

门禁

  • 完整页面 Map 未经用户确认，不生成方向稿；全部 Section 未被 Structure Approved 的 Segment 或 Section Correction 覆盖时，不交给 HTML Prototyper。
  • 用户可以只确认某张图的 Visual Language；这不自动确认其中错误的 Section 结构。
  • 只有 Layout、栏位或组件名称的 Section 不是合格设计方案。
  • 真实素材审计推翻已确认假设时，只重新打开受影响 Section 的 Map 门禁。
  • 方向稿只需足以判断构图、证据与主次、大致比例、密度和节奏，不追求设计师终稿精度。

Reference 路由

当前任务读取
完整页面 MapPage UI Architecture Map + Module Design Review + 布局与构图原则 + Motion Intent Contract
整页或模块图片方向Visual Direction + 布局与构图原则
用户明确需要整页图片预览Visual Direction + scripts/compose_segments.py
B2B、企业站或证据驱动模块证据驱动设计
页面太静态、需要增加活力或设计 SignatureMotion Intent Contract；只补受影响页面/Section，不让 HTML 临时发明
方案不明确、需比较，或用户认为结果简单/普通/怪异设计探索；按条件返回 website-reference-researcher，或可选调用 Product Design ideate
视觉确认后命名模块命名
验证设计门禁与回归行为行为用例

交付与边界

  • 完整页面交付 设计稿/directions/<page-slug>/<page-slug>-ui-architecture-map.md、覆盖全部 Section 的已确认 Segment Set、按需的 Section Correction、Canonical Module Slug，以及按需生成的 visual-direction-notes.md；只有确认采用显式 Layer 2/3 时 Map 才包含 Page Motion Budget 与 Section Motion Intent。AI Overview 不属于默认交付。
  • 用户明确要求整页预览时，才用脚本把已确认 Segment 按比例缩放、不裁切地纵向拼接为 page-composite-preview.png；它不是新的设计权威。
  • visual-direction-notes.md 在存在 Correction、B 类 HTML 修正、被保留的视觉语言参考或需跨会话交接时生成；Module Design Solution 默认紧凑写在 Map 内，不为每个模块新建文档。
  • 不编写或修改 HTML/CSS/JS，不执行 Browser QA，不规划 Elementor 字段，不实现 WordPress、React、Shopify 或其他平台代码。
  • 生成图只用于方向或明确占位，不得冒充真实工厂、设备、人员、证书、客户或结果证据。

冲突时按“可访问性与硬约束 > Design System > 业务事实 > 用户确认方向 > 页面上下文”处理。

レビュー

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

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

elementor-site-initialize

無料

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日 更新

elementor-site-style-adapter

無料

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日 更新

elementor-site-team-manager

無料

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日 更新

elementor-widget-pipeline

無料

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

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

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

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.

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

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

website-html-prototyper

無料

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日 更新

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

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