npm - wizz-method - Versions diffs - 1.0.2 → 1.1.0 - Mend

wizz-method 1.0.2 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (833) hide show

package/src/skills-lib/huashu-design/assets/showcases/INDEX.md ADDED Viewed

@@ -0,0 +1,115 @@
+# Design Philosophy Showcases — 样例资产索引
+> 8 种场景 × 3 种风格 = 24 个预制设计样例
+> 用于 Phase 3 推荐设计方向时，直接展示「这个风格做出来长什么样」
+## 风格说明
+| 代号 | 流派 | 风格名称 | 视觉气质 |
+|------|------|---------|---------|
+| **Pentagram** | 信息建筑派 | Pentagram / Michael Bierut | 黑白克制、瑞士网格、强字体层级、#E63946红色强调 |
+| **Build** | 极简主义派 | Build Studio | 奢侈品级留白(70%+)、微妙字重(200-600)、#D4A574暖金、精致 |
+| **Takram** | 东方哲学派 | Takram | 柔和科技感、自然色(米色/灰/绿)、圆角、图表如艺术 |
+## 场景速查表
+### 内容设计场景
+| # | 场景 | 规格 | Pentagram | Build | Takram |
+|---|------|------|-----------|-------|--------|
+| 1 | 公众号封面 | 1200×510 | `cover/cover-pentagram` | `cover/cover-build` | `cover/cover-takram` |
+| 2 | PPT数据页 | 1920×1080 | `ppt/ppt-pentagram` | `ppt/ppt-build` | `ppt/ppt-takram` |
+| 3 | 竖版信息图 | 1080×1920 | `infographic/infographic-pentagram` | `infographic/infographic-build` | `infographic/infographic-takram` |
+### 网站设计场景
+| # | 场景 | 规格 | Pentagram | Build | Takram |
+|---|------|------|-----------|-------|--------|
+| 4 | 个人主页 | 1440×900 | `website-homepage/homepage-pentagram` | `website-homepage/homepage-build` | `website-homepage/homepage-takram` |
+| 5 | AI导航站 | 1440×900 | `website-ai-nav/ainav-pentagram` | `website-ai-nav/ainav-build` | `website-ai-nav/ainav-takram` |
+| 6 | AI写作工具 | 1440×900 | `website-ai-writing/aiwriting-pentagram` | `website-ai-writing/aiwriting-build` | `website-ai-writing/aiwriting-takram` |
+| 7 | SaaS落地页 | 1440×900 | `website-saas/saas-pentagram` | `website-saas/saas-build` | `website-saas/saas-takram` |
+| 8 | 开发者文档 | 1440×900 | `website-devdocs/devdocs-pentagram` | `website-devdocs/devdocs-build` | `website-devdocs/devdocs-takram` |
+> 每个条目同时有 `.html`（源码）和 `.png`（截图）两个文件
+## 使用说明
+### Phase 3 推荐时引用
+推荐设计方向后，可展示对应场景的预制截图：
+```
+「这是 Pentagram 风格做公众号封面的效果 → [展示 cover/cover-pentagram.png]」
+「Takram 风格做 PPT 数据页是这种感觉 → [展示 ppt/ppt-takram.png]」
+```
+### 场景匹配优先级
+1. 用户需求的场景有精确匹配 → 直接展示对应场景
+2. 无精确匹配但类型相近 → 展示最近似的场景（如「产品官网」→ 展示 SaaS 落地页）
+3. 完全不匹配 → 跳过预制样例，直接进 Phase 3.5 现场生成
+### 横向对比展示
+同一场景的 3 个风格适合并排展示，帮助用户直观比较：
+- 「这是同一个公众号封面，分别用 3 种风格实现的效果」
+- 展示顺序：Pentagram（理性克制）→ Build（奢华极简）→ Takram（柔和温暖）
+## 内容详情
+### 公众号封面（cover/）
+- 内容：Claude Code Agent 工作流 — 8 个并行 Agent 架构
+- Pentagram：巨大红色「8」+ 瑞士网格线 + 数据条
+- Build：超细字重「Agent」悬浮于 70% 留白中 + 暖金细线
+- Takram：8 节点放射状流程图作为艺术品 + 米色底
+### PPT数据页（ppt/）
+- 内容：GLM-4.7 开源模型 Coding 能力突破（AIME 95.7 / SWE-bench 73.8% / τ²-Bench 87.4）
+- Pentagram：260px「95.7」锚点 + 红/灰/浅灰对比条形图
+- Build：三组 120px 超细数字悬浮 + 暖金渐变对比条
+- Takram：SVG 雷达图 + 三色叠加 + 圆角数据卡片
+### 竖版信息图（infographic/）
+- 内容：AI 记忆系统 CLAUDE.md 从 93KB 优化到 22KB
+- Pentagram：巨大「93→22」数字 + 编号区块 + CSS 数据条
+- Build：极致留白 + 柔影卡片 + 暖金连接线
+- Takram：SVG 环形图 + 有机曲线流程图 + 毛玻璃卡片
+### 个人主页（website-homepage/）
+- 内容：独立开发者 Alex Chen 的作品集首页
+- Pentagram：112px 大名 + 瑞士网格分栏 + 编辑数字
+- Build：玻璃态导航 + 悬浮统计卡片 + 超细字重
+- Takram：纸质纹理 + 小圆形头像 + 发丝细分隔线 + 不对称布局
+### AI导航站（website-ai-nav/）
+- 内容：AI Compass — 500+ AI 工具目录
+- Pentagram：方角搜索框 + 编号工具列表 + 大写分类标签
+- Build：圆角搜索框 + 精致白色工具卡片 + 药丸标签
+- Takram：有机错位卡片布局 + 柔和分类标签 + 图表式连接
+### AI写作工具（website-ai-writing/）
+- 内容：Inkwell — AI 写作助手
+- Pentagram：86px 大标题 + 线框编辑器模型 + 网格特性列
+- Build：漂浮编辑器卡片 + 暖金 CTA + 奢华写作体验
+- Takram：诗意衬线标题 + 有机编辑器 + 流程图
+### SaaS落地页（website-saas/）
+- 内容：Meridian — 商业智能分析平台
+- Pentagram：黑白分栏 + 结构化仪表盘 + 140px「3x」锚点
+- Build：悬浮仪表盘卡片 + SVG 面积图 + 暖金渐变
+- Takram：圆角柱状图 + 流程节点 + 柔和地球色
+### 开发者文档（website-devdocs/）
+- 内容：Nexus API — 统一 AI 模型网关
+- Pentagram：左侧导航栏 + 方角代码块 + 红色字符串高亮
+- Build：居中漂浮代码卡片 + 柔影 + 暖金图标
+- Takram：米色代码块 + 流程图连接 + 虚线特性卡片
+## 文件统计
+- HTML 源文件：24 个
+- PNG 截图：24 个
+- 总资产：48 个文件
+---
+**版本**：v1.0
+**创建日期**：2026-02-13
+**适用于**：design-philosophy skill Phase 3 推荐环节

package/src/skills-lib/huashu-design/assets/showcases/cover/cover-build.html ADDED Viewed

@@ -0,0 +1,235 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1200">
+<title>Claude Code Agent - Build Studio Style</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    width: 1200px;
+    height: 510px;
+    overflow: hidden;
+    margin: 0;
+    background: #FAFAF8;
+    font-family: 'Inter', sans-serif;
+    position: relative;
+  }
+  /* Subtle top gradient wash */
+  .wash {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1200px;
+    height: 510px;
+    background: radial-gradient(ellipse 800px 400px at 30% 40%, rgba(212, 165, 116, 0.06) 0%, transparent 70%);
+    z-index: 0;
+  }
+  /* Main layout */
+  .layout {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1200px;
+    height: 510px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+  }
+  .center-block {
+    text-align: center;
+    max-width: 700px;
+    margin-top: -24px; /* slight upward shift for golden ratio vertical center */
+  }
+  /* Floating "Agent" */
+  .floating-agent {
+    font-family: 'Inter', sans-serif;
+    font-weight: 200;
+    font-size: 128px;
+    letter-spacing: -4px;
+    color: #1A1A18;
+    line-height: 1;
+    margin-bottom: 16px;
+    position: relative;
+  }
+  .floating-agent span {
+    position: relative;
+    display: inline-block;
+  }
+  /* Slight weight shift on first letter for visual interest */
+  .floating-agent .accent-letter {
+    font-weight: 300;
+    color: #2A2A28;
+  }
+  /* Gold underline accent */
+  .gold-line {
+    width: 48px;
+    height: 1px;
+    background: #D4A574;
+    margin: 0 auto 32px;
+    opacity: 0.7;
+  }
+  /* Subtitle — label tier: smallest text, widest spacing */
+  .subtitle {
+    font-family: 'Inter', sans-serif;
+    font-weight: 400;
+    font-size: 10px;
+    letter-spacing: 6px;
+    text-transform: uppercase;
+    color: #B0ACA4;
+    margin-bottom: 24px;
+  }
+  /* Description line — body tier */
+  .desc {
+    font-family: 'Inter', sans-serif;
+    font-weight: 300;
+    font-size: 13px;
+    color: #A8A4A0;
+    letter-spacing: 0.3px;
+    line-height: 2;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+  /* Minimal agent indicators — 8 thin vertical lines */
+  .agent-indicators {
+    position: absolute;
+    bottom: 48px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 16px;
+    align-items: flex-end;
+    z-index: 2;
+  }
+  .indicator {
+    width: 1px;
+    background: #D8D4CE;
+    border-radius: 0.5px;
+  }
+  .indicator.gold {
+    background: #D4A574;
+    width: 1.5px;
+    opacity: 0.8;
+  }
+  /* Corner marks */
+  .corner-mark {
+    position: absolute;
+    z-index: 2;
+  }
+  .corner-mark svg {
+    display: block;
+  }
+  .corner-tl { top: 48px; left: 48px; }
+  .corner-br { bottom: 48px; right: 48px; transform: rotate(180deg); }
+  /* Side text */
+  .side-label {
+    position: absolute;
+    font-family: 'Inter', sans-serif;
+    font-weight: 400;
+    font-size: 8px;
+    letter-spacing: 4px;
+    text-transform: uppercase;
+    color: #CBC7C0;
+    z-index: 2;
+  }
+  .side-left {
+    left: 48px;
+    top: 50%;
+    transform: translateY(-50%) rotate(-90deg);
+    transform-origin: center center;
+  }
+  .side-right {
+    right: 48px;
+    top: 50%;
+    transform: translateY(-50%) rotate(90deg);
+    transform-origin: center center;
+  }
+  /* Removed shadow-card — Build purity demands uninterrupted whitespace */
+  /* Number 8 whisper */
+  .number-whisper {
+    position: absolute;
+    top: 48px;
+    right: 96px;
+    font-family: 'Inter', sans-serif;
+    font-weight: 200;
+    font-size: 24px;
+    color: #D4A574;
+    opacity: 0.35;
+    z-index: 2;
+  }
+</style>
+</head>
+<body>
+  <div class="wash"></div>
+  <!-- Corner marks -->
+  <div class="corner-mark corner-tl">
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0 0L0 20" stroke="#D4A574" stroke-width="0.5" opacity="0.4"/>
+      <path d="M0 0L20 0" stroke="#D4A574" stroke-width="0.5" opacity="0.4"/>
+    </svg>
+  </div>
+  <div class="corner-mark corner-br">
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0 0L0 20" stroke="#D4A574" stroke-width="0.5" opacity="0.4"/>
+      <path d="M0 0L20 0" stroke="#D4A574" stroke-width="0.5" opacity="0.4"/>
+    </svg>
+  </div>
+  <!-- Side labels -->
+  <div class="side-label side-left">Claude Code</div>
+  <div class="side-label side-right">Parallel Workflow</div>
+  <!-- Number whisper -->
+  <div class="number-whisper">8</div>
+  <!-- Main content -->
+  <div class="layout">
+    <div class="center-block">
+      <div class="subtitle">Parallel Architecture</div>
+      <div class="floating-agent"><span><span class="accent-letter">A</span>gent</span></div>
+      <div class="gold-line"></div>
+      <div class="desc">
+        Eight autonomous agents orchestrated in parallel,<br>
+        each solving a distinct piece of the whole.
+      </div>
+    </div>
+  </div>
+  <!-- Agent indicators -->
+  <div class="agent-indicators">
+    <div class="indicator" style="height: 20px;"></div>
+    <div class="indicator" style="height: 28px;"></div>
+    <div class="indicator gold" style="height: 36px;"></div>
+    <div class="indicator" style="height: 22px;"></div>
+    <div class="indicator" style="height: 32px;"></div>
+    <div class="indicator gold" style="height: 40px;"></div>
+    <div class="indicator" style="height: 24px;"></div>
+    <div class="indicator" style="height: 30px;"></div>
+  </div>
+</body>
+</html>

package/src/skills-lib/huashu-design/assets/showcases/cover/cover-build.png ADDED Viewed

Binary file

package/src/skills-lib/huashu-design/assets/showcases/cover/cover-pentagram.html ADDED Viewed

@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1200">
+<title>Agent Parallel — Pentagram Style Cover</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    width: 1200px;
+    height: 510px;
+    overflow: hidden;
+    margin: 0;
+    background: #FFFFFF;
+    font-family: 'Helvetica Neue', 'Arial', sans-serif;
+    position: relative;
+  }
+  /* Grid rules — Swiss grid visible structure */
+  .rule-h {
+    position: absolute;
+    left: 64px;
+    right: 64px;
+    height: 1px;
+    background: #000;
+    opacity: 0.06;
+  }
+  .rule-v {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: #000;
+    opacity: 0.04;
+  }
+  /* Giant typographic element — the "8" bleeds off right edge */
+  .type-anchor {
+    position: absolute;
+    right: -60px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    font-weight: 900;
+    font-size: 640px;
+    line-height: 0.82;
+    color: #000;
+    opacity: 0.07;
+    z-index: 0;
+    user-select: none;
+  }
+  /* Red geometric dot grid — 8 dots representing 8 agents */
+  .dot-grid {
+    position: absolute;
+    right: 340px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: grid;
+    grid-template-columns: repeat(4, 24px);
+    grid-template-rows: repeat(2, 24px);
+    gap: 16px;
+    z-index: 1;
+  }
+  .dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #000;
+    opacity: 0.12;
+    align-self: center;
+    justify-self: center;
+  }
+  .dot.active {
+    background: #E63946;
+    opacity: 0.8;
+    width: 10px;
+    height: 10px;
+  }
+  /* Primary content zone — left-aligned on Swiss grid */
+  .content {
+    position: absolute;
+    left: 64px;
+    top: 56px;
+    z-index: 2;
+  }
+  .label {
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 4px;
+    text-transform: uppercase;
+    color: #E63946;
+    margin-bottom: 16px;
+  }
+  .title {
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    font-weight: 900;
+    font-size: 120px;
+    line-height: 0.9;
+    color: #000;
+    letter-spacing: -5px;
+  }
+  .title .accent {
+    color: #E63946;
+  }
+  /* Bottom information bar */
+  .bottom-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 48px;
+    background: #000;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 64px;
+  }
+  .bottom-left {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+  }
+  .bottom-stat {
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    color: #fff;
+    opacity: 0.6;
+  }
+  .bottom-stat strong {
+    color: #E63946;
+    opacity: 1;
+    font-size: 16px;
+    margin-right: 6px;
+  }
+  .bottom-right {
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    color: #fff;
+    opacity: 0.4;
+  }
+  /* Subtitle */
+  .subtitle {
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    color: #999;
+    letter-spacing: 0.5px;
+    margin-top: 20px;
+  }
+  /* Horizontal red rule through center */
+  .center-rule {
+    position: absolute;
+    left: 64px;
+    width: 240px;
+    height: 3px;
+    background: #E63946;
+    top: 306px;
+    z-index: 2;
+  }
+</style>
+</head>
+<body>
+  <!-- Grid structure -->
+  <div class="rule-h" style="top: 56px;"></div>
+  <div class="rule-v" style="left: 64px;"></div>
+  <div class="rule-v" style="left: 600px;"></div>
+  <div class="rule-v" style="right: 64px;"></div>
+  <!-- Typographic anchor — bleeds right -->
+  <div class="type-anchor">8</div>
+  <!-- 8-dot grid representing agents -->
+  <div class="dot-grid">
+    <div class="dot active"></div>
+    <div class="dot"></div>
+    <div class="dot active"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot active"></div>
+    <div class="dot"></div>
+    <div class="dot active"></div>
+  </div>
+  <!-- Content -->
+  <div class="content">
+    <div class="label">Claude Code Architecture</div>
+    <div class="title">Agent<br><span class="accent">Parallel</span></div>
+    <div class="subtitle">8 autonomous agents running in unified workflow</div>
+  </div>
+  <!-- Red horizontal rule -->
+  <div class="center-rule"></div>
+  <!-- Black bottom bar with data -->
+  <div class="bottom-bar">
+    <div class="bottom-left">
+      <div class="bottom-stat"><strong>8</strong>Agents</div>
+      <div class="bottom-stat"><strong>3.2x</strong>Faster</div>
+      <div class="bottom-stat"><strong>1</strong>Workflow</div>
+    </div>
+    <div class="bottom-right">Pentagram Design System</div>
+  </div>
+</body>
+</html>

package/src/skills-lib/huashu-design/assets/showcases/cover/cover-pentagram.png ADDED Viewed

Binary file