npm - @microi.net/cli - Versions diffs - 4.6.2 - Mend

@microi.net/cli 4.6.2

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 (112) hide show

package/dist/microi.skills/ui-design/assets/pattern-showcase/app.js ADDED Viewed

@@ -0,0 +1,54 @@
+(function () {
+  'use strict';
+  var root = document.documentElement;
+  var themeToggle = document.getElementById('themeToggle');
+  var filterButtons = Array.prototype.slice.call(document.querySelectorAll('[data-filter]'));
+  var cards = Array.prototype.slice.call(document.querySelectorAll('[data-kind]'));
+  var form = document.getElementById('flowForm');
+  var nameInput = document.getElementById('workspaceName');
+  var status = document.getElementById('formStatus');
+  var submit = document.getElementById('flowSubmit');
+  themeToggle.addEventListener('click', function () {
+    var nextTheme = root.dataset.mciTheme === 'dark' ? 'light' : 'dark';
+    root.dataset.mciTheme = nextTheme;
+    themeToggle.setAttribute('aria-pressed', nextTheme === 'light' ? 'true' : 'false');
+  });
+  filterButtons.forEach(function (button) {
+    button.addEventListener('click', function () {
+      var filter = button.dataset.filter;
+      filterButtons.forEach(function (item) { item.classList.toggle('is-active', item === button); });
+      cards.forEach(function (card) {
+        var visible = filter === 'all' || card.dataset.kind === filter;
+        card.classList.toggle('is-hidden', !visible);
+      });
+    });
+  });
+  form.addEventListener('submit', function (event) {
+    event.preventDefault();
+    var value = nameInput.value.trim();
+    status.className = 'mci-flow-card__status';
+    if (value.length < 2 || value.length > 24) {
+      status.textContent = '请输入 2—24 个字符的空间名称。';
+      status.classList.add('is-error');
+      nameInput.focus();
+      return;
+    }
+    submit.disabled = true;
+    submit.classList.add('is-loading');
+    submit.querySelector('span').textContent = '正在创建';
+    status.textContent = '正在校验空间配置，请稍候…';
+    window.setTimeout(function () {
+      submit.disabled = false;
+      submit.classList.remove('is-loading');
+      submit.querySelector('span').textContent = '重新演示';
+      status.textContent = '“' + value + '”已准备好，可以继续邀请成员。';
+      status.classList.add('is-success');
+    }, 760);
+  });
+}());

package/dist/microi.skills/ui-design/assets/pattern-showcase/index.html ADDED Viewed

@@ -0,0 +1,163 @@
+<!doctype html>
+<html lang="zh-CN" data-mci-theme="dark" data-mci-shape="rounded">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <meta name="color-scheme" content="dark light">
+  <title>Microi 设计模式实验室</title>
+  <link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+  <main class="mci-lab" data-mci-ui-root>
+    <header class="mci-lab__nav">
+      <a class="mci-lab__brand" href="#top" aria-label="返回顶部">
+        <span class="mci-lab__brand-mark" aria-hidden="true">M</span>
+        <span>Microi Pattern Lab</span>
+      </a>
+      <nav class="mci-lab__nav-links" aria-label="页面导航">
+        <a href="#patterns">设计模式</a>
+        <a href="#flow">产品流程</a>
+        <a href="#contract">设计契约</a>
+      </nav>
+      <button class="mci-icon-button" id="themeToggle" type="button" aria-label="切换明暗主题" aria-pressed="false">
+        <span class="mci-icon-button__sun" aria-hidden="true">☀</span>
+        <span class="mci-icon-button__moon" aria-hidden="true">◐</span>
+      </button>
+    </header>
+    <section class="mci-hero" id="top">
+      <div class="mci-hero__ambient" aria-hidden="true">
+        <span></span><span></span><span></span>
+      </div>
+      <div class="mci-hero__content">
+        <span class="mci-eyebrow">MICROI ORIGINAL DESIGN SYSTEM</span>
+        <h1>让业务界面先有<br><em>清晰的设计意图</em></h1>
+        <p>六类内置设计模式覆盖品牌、产品流程、趋势构图、沉浸互动、动态首屏与数据工作台。每一种模式都复用同一套 Microi token、状态和响应式规则。</p>
+        <div class="mci-hero__actions">
+          <a class="mci-button mci-button--primary" href="#patterns">浏览设计模式 <span aria-hidden="true">↘</span></a>
+          <a class="mci-button mci-button--quiet" href="#flow">查看真实流程</a>
+        </div>
+      </div>
+      <div class="mci-hero__console" aria-label="设计系统实时状态">
+        <div class="mci-console__head"><span></span><span></span><span></span><b>MCI-DESIGN</b></div>
+        <div class="mci-console__orbit" aria-hidden="true"><i></i><i></i><i></i></div>
+        <div class="mci-console__metric"><small>组件状态覆盖率</small><strong>08</strong><span>default → error</span></div>
+        <div class="mci-console__footer"><span>responsive</span><span>accessible</span><span>reduced-motion</span></div>
+      </div>
+    </section>
+    <section class="mci-section" id="patterns">
+      <div class="mci-section__head">
+        <div><span class="mci-eyebrow">PATTERN LIBRARY</span><h2>六种模式，一套品牌语言</h2></div>
+        <div class="mci-filter" role="group" aria-label="设计模式筛选">
+          <button class="is-active" type="button" data-filter="all">全部</button>
+          <button type="button" data-filter="story">叙事</button>
+          <button type="button" data-filter="product">产品</button>
+          <button type="button" data-filter="motion">互动</button>
+          <button type="button" data-filter="data">数据</button>
+        </div>
+      </div>
+      <div class="mci-pattern-grid">
+        <article class="mci-pattern mci-pattern--story" data-kind="story">
+          <div class="mci-pattern__visual">
+            <span class="mci-pattern__index">01</span>
+            <div class="mci-story-word">MAKE<br><em>MEANING</em></div>
+            <i class="mci-story-line"></i>
+          </div>
+          <div class="mci-pattern__copy"><span>品牌叙事</span><h3>用观点建立首屏记忆</h3><p>大标题、单一主张、章节节奏与克制的行动路径。</p></div>
+        </article>
+        <article class="mci-pattern mci-pattern--product" data-kind="product">
+          <div class="mci-pattern__visual">
+            <span class="mci-pattern__index">02</span>
+            <div class="mci-phone-card">
+              <div class="mci-phone-card__bar"><i></i><span>新建空间</span><b>2 / 3</b></div>
+              <div class="mci-phone-card__progress"><i></i></div>
+              <strong>选择工作方式</strong>
+              <div class="mci-phone-card__choice is-selected"><i>✓</i><span>团队协作<small>角色与权限可配置</small></span></div>
+              <div class="mci-phone-card__choice"><i></i><span>个人项目<small>从轻量空间开始</small></span></div>
+            </div>
+          </div>
+          <div class="mci-pattern__copy"><span>真实产品流程</span><h3>状态比装饰更重要</h3><p>从登录到成功页，覆盖加载、空、错误、禁用与权限状态。</p></div>
+        </article>
+        <article class="mci-pattern mci-pattern--editorial" data-kind="story">
+          <div class="mci-pattern__visual">
+            <span class="mci-pattern__index">03</span>
+            <div class="mci-editorial-type"><b>32</b><span>结构化构图<br>打破均匀排版</span></div>
+            <div class="mci-editorial-card"><i></i><i></i><i></i><strong>一主两辅</strong></div>
+          </div>
+          <div class="mci-pattern__copy"><span>趋势构图</span><h3>不对称但保持秩序</h3><p>超大字号、编辑式留白、几何切片与明确阅读顺序。</p></div>
+        </article>
+        <article class="mci-pattern mci-pattern--immersive" data-kind="motion">
+          <div class="mci-pattern__visual">
+            <span class="mci-pattern__index">04</span>
+            <div class="mci-orb" aria-hidden="true"><i></i><i></i><i></i><b></b></div>
+            <div class="mci-orb-copy"><strong>FOCUS OBJECT</strong><span>界面 → 氛围 → 焦点对象</span></div>
+          </div>
+          <div class="mci-pattern__copy"><span>沉浸互动</span><h3>互动服务于理解</h3><p>场景只强化产品对象，并准备静态、低配和无动效降级。</p></div>
+        </article>
+        <article class="mci-pattern mci-pattern--motion" data-kind="motion">
+          <div class="mci-pattern__visual">
+            <span class="mci-pattern__index">05</span>
+            <div class="mci-motion-copy"><small>0—1200 MS</small><strong>第一秒<br>说清楚</strong></div>
+            <div class="mci-motion-track"><i></i><i></i><i></i><i></i></div>
+          </div>
+          <div class="mci-pattern__copy"><span>动态首屏</span><h3>用时间线组织注意力</h3><p>标题、说明、主操作依次出现；循环动效不制造操作噪声。</p></div>
+        </article>
+        <article class="mci-pattern mci-pattern--data" data-kind="data">
+          <div class="mci-pattern__visual">
+            <span class="mci-pattern__index">06</span>
+            <div class="mci-data-head"><span>运营总览</span><b>实时</b></div>
+            <div class="mci-data-metrics"><span><small>服务中</small><b>128</b></span><span><small>完成率</small><b>96%</b></span><span><small>风险项</small><b>07</b></span></div>
+            <div class="mci-data-chart" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
+          </div>
+          <div class="mci-pattern__copy"><span>数据工作台</span><h3>先异常，再趋势，后明细</h3><p>紧凑密度、统一数值格式、筛选回显与可追溯数据状态。</p></div>
+        </article>
+      </div>
+    </section>
+    <section class="mci-flow" id="flow">
+      <div class="mci-flow__intro">
+        <span class="mci-eyebrow">REAL PRODUCT FLOW</span>
+        <h2>流程不是一张好看的静态图</h2>
+        <p>这个原创演示包含真实输入、校验、加载和成功反馈。界面在任何状态下都保持稳定尺寸，避免闪烁和跳动。</p>
+        <ul>
+          <li><span>01</span>默认状态可理解</li>
+          <li><span>02</span>错误状态可恢复</li>
+          <li><span>03</span>成功状态有下一步</li>
+        </ul>
+      </div>
+      <form class="mci-flow-card" id="flowForm" novalidate>
+        <div class="mci-flow-card__head"><span>创建协作空间</span><small>安全演示 · 不会提交数据</small></div>
+        <label class="mci-field"><span>空间名称</span><input id="workspaceName" name="workspace" autocomplete="organization" placeholder="例如：品牌增长中心"><small>2—24 个字符</small></label>
+        <fieldset class="mci-plan-group"><legend>协作规模</legend><label><input type="radio" name="plan" value="small" checked><span><b>轻量团队</b><small>1—10 人</small></span></label><label><input type="radio" name="plan" value="growth"><span><b>成长团队</b><small>11—50 人</small></span></label></fieldset>
+        <div class="mci-flow-card__status" id="formStatus" role="status" aria-live="polite">填写名称后即可创建演示空间。</div>
+        <button class="mci-button mci-button--primary mci-flow-card__submit" id="flowSubmit" type="submit"><span>创建演示空间</span><i aria-hidden="true">→</i></button>
+      </form>
+    </section>
+    <section class="mci-contract" id="contract">
+      <div class="mci-contract__copy"><span class="mci-eyebrow">MCI-DESIGN CONTRACT</span><h2>让下一位开发者与 AI 都能延续同一套界面</h2><p>设计模式、token、组件状态、页面顺序、响应式和降级策略都写进项目契约，不依赖口头描述。</p></div>
+      <div class="mci-contract__tokens" aria-label="设计 token 示例">
+        <span style="--token:#5b7cfa"><i></i><b>Primary</b><small>#5B7CFA</small></span>
+        <span style="--token:#26d7b0"><i></i><b>Success</b><small>#26D7B0</small></span>
+        <span style="--token:#ffca68"><i></i><b>Warning</b><small>#FFCA68</small></span>
+        <span style="--token:#ff6b88"><i></i><b>Danger</b><small>#FF6B88</small></span>
+      </div>
+      <pre class="mci-contract__code"><code><span>mode</span>: data-workspace
+<span>density</span>: compact
+<span>states</span>: [default, loading, empty, error, success]
+<span>responsive</span>: [390, 768, 1440]
+<span>motion</span>: reduced-motion-ready</code></pre>
+    </section>
+    <footer class="mci-lab__footer"><span>Microi.UI Original Pattern Asset</span><span>Local only · No external dependency</span></footer>
+  </main>
+  <script src="./app.js"></script>
+</body>
+</html>

package/dist/microi.skills/ui-design/assets/pattern-showcase/styles.css ADDED Viewed

@@ -0,0 +1,311 @@
+:root {
+  color-scheme: dark;
+  --mci-bg: #07101f;
+  --mci-bg-soft: #0d1830;
+  --mci-surface: rgba(15, 28, 52, 0.78);
+  --mci-surface-solid: #111f39;
+  --mci-border: rgba(151, 173, 216, 0.16);
+  --mci-text: #f4f7ff;
+  --mci-text-muted: #9aa9c6;
+  --mci-primary: #6b87ff;
+  --mci-primary-strong: #4f6df0;
+  --mci-cyan: #38dcff;
+  --mci-success: #26d7b0;
+  --mci-warning: #ffca68;
+  --mci-danger: #ff6b88;
+  --mci-shape-card: 28px;
+  --mci-shape-panel: 22px;
+  --mci-shape-button: 999px;
+  --mci-shape-input: 14px;
+  --mci-shadow-card: 0 20px 70px rgba(0, 0, 0, 0.22);
+  --mci-shadow-float: 0 22px 60px rgba(32, 61, 141, 0.28);
+  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
+}
+:root[data-mci-theme="light"] {
+  color-scheme: light;
+  --mci-bg: #f2f5fb;
+  --mci-bg-soft: #e9eef8;
+  --mci-surface: rgba(255, 255, 255, 0.86);
+  --mci-surface-solid: #ffffff;
+  --mci-border: rgba(31, 50, 91, 0.12);
+  --mci-text: #14203a;
+  --mci-text-muted: #66738d;
+  --mci-shadow-card: 0 20px 70px rgba(42, 62, 112, 0.12);
+  --mci-shadow-float: 0 22px 60px rgba(66, 91, 162, 0.18);
+}
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body { margin: 0; min-width: 320px; background: var(--mci-bg); color: var(--mci-text); }
+button, input { font: inherit; }
+button, a { -webkit-tap-highlight-color: transparent; }
+.mci-lab {
+  min-height: 100vh;
+  overflow: hidden;
+  background:
+    linear-gradient(rgba(107, 135, 255, 0.035) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(107, 135, 255, 0.035) 1px, transparent 1px),
+    radial-gradient(circle at 12% 0%, rgba(66, 105, 255, 0.18), transparent 28%),
+    var(--mci-bg);
+  background-size: 44px 44px, 44px 44px, auto, auto;
+}
+.mci-lab a { color: inherit; text-decoration: none; }
+.mci-lab__nav {
+  position: relative;
+  z-index: 20;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  width: min(1180px, calc(100% - 40px));
+  height: 84px;
+  margin: 0 auto;
+  border-bottom: 1px solid var(--mci-border);
+}
+.mci-lab__brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
+.mci-lab__brand-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: white; background: linear-gradient(145deg, var(--mci-primary), #935fff); box-shadow: 0 10px 24px rgba(92, 112, 255, .28); }
+.mci-lab__nav-links { display: flex; gap: 30px; font-size: 13px; color: var(--mci-text-muted); }
+.mci-lab__nav-links a { position: relative; padding: 10px 0; }
+.mci-lab__nav-links a::after { position: absolute; right: 50%; bottom: 4px; left: 50%; height: 1px; content: ""; background: var(--mci-primary); transition: .25s ease; }
+.mci-lab__nav-links a:hover::after, .mci-lab__nav-links a:focus-visible::after { right: 0; left: 0; }
+.mci-icon-button { justify-self: end; display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 68px; height: 36px; padding: 4px; border: 1px solid var(--mci-border); border-radius: 999px; color: var(--mci-text-muted); background: var(--mci-surface); cursor: pointer; }
+.mci-icon-button span { display: grid; height: 26px; place-items: center; border-radius: 50%; transition: .2s ease; }
+:root[data-mci-theme="dark"] .mci-icon-button__moon,
+:root[data-mci-theme="light"] .mci-icon-button__sun { color: #fff; background: var(--mci-primary); box-shadow: 0 4px 12px rgba(91, 124, 250, .28); }
+.mci-hero {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 1.06fr) minmax(390px, .94fr);
+  gap: clamp(50px, 8vw, 112px);
+  align-items: center;
+  width: min(1180px, calc(100% - 40px));
+  min-height: 670px;
+  margin: 0 auto;
+  padding: 78px 0 96px;
+}
+.mci-hero__ambient { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
+.mci-hero__ambient span { position: absolute; border: 1px solid rgba(107, 135, 255, .13); border-radius: 50%; animation: mci-drift 12s ease-in-out infinite alternate; }
+.mci-hero__ambient span:nth-child(1) { top: 90px; right: -170px; width: 540px; height: 540px; }
+.mci-hero__ambient span:nth-child(2) { top: 188px; right: -74px; width: 340px; height: 340px; animation-delay: -3s; }
+.mci-hero__ambient span:nth-child(3) { top: 256px; right: -6px; width: 200px; height: 200px; animation-delay: -6s; }
+.mci-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--mci-cyan); font-size: 11px; font-weight: 800; letter-spacing: .22em; }
+.mci-eyebrow::before { width: 26px; height: 1px; content: ""; background: currentColor; }
+.mci-hero h1 { margin: 26px 0 24px; font-size: clamp(56px, 6.6vw, 92px); line-height: .97; letter-spacing: -.065em; }
+.mci-hero h1 em { color: transparent; font-style: normal; background: linear-gradient(100deg, #9aaeff 0%, #5ee7ff 48%, #a784ff 100%); -webkit-background-clip: text; background-clip: text; }
+.mci-hero__content > p { max-width: 650px; margin: 0; color: var(--mci-text-muted); font-size: 16px; line-height: 1.9; }
+.mci-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
+.mci-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 12px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--mci-shape-button); font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
+.mci-button:hover, .mci-button:focus-visible { transform: translateY(-2px); }
+.mci-button:active { transform: translateY(0) scale(.98); }
+.mci-button--primary { color: #fff !important; background: linear-gradient(135deg, var(--mci-primary), var(--mci-primary-strong)); box-shadow: 0 13px 32px rgba(79, 109, 240, .32); }
+.mci-button--quiet { border-color: var(--mci-border); background: var(--mci-surface); }
+.mci-hero__console { position: relative; min-height: 420px; padding: 22px; overflow: hidden; border: 1px solid rgba(131, 156, 232, .23); border-radius: 34px; background: linear-gradient(160deg, rgba(25, 45, 81, .94), rgba(10, 20, 40, .86)); box-shadow: 0 35px 100px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .09); }
+:root[data-mci-theme="light"] .mci-hero__console { background: linear-gradient(160deg, #fdfdff, #e9effc); box-shadow: var(--mci-shadow-float); }
+.mci-console__head { display: flex; align-items: center; gap: 7px; padding-bottom: 18px; border-bottom: 1px solid var(--mci-border); }
+.mci-console__head span { width: 7px; height: 7px; border-radius: 50%; background: var(--mci-danger); }
+.mci-console__head span:nth-child(2) { background: var(--mci-warning); }
+.mci-console__head span:nth-child(3) { background: var(--mci-success); }
+.mci-console__head b { margin-left: auto; color: var(--mci-text-muted); font-size: 10px; letter-spacing: .18em; }
+.mci-console__orbit { position: absolute; top: 90px; left: 50%; width: 230px; height: 230px; transform: translateX(-50%); }
+.mci-console__orbit::before, .mci-console__orbit i { position: absolute; inset: 0; content: ""; border: 1px solid rgba(96, 224, 255, .18); border-radius: 50%; }
+.mci-console__orbit::before { inset: 38px; border: 0; background: radial-gradient(circle at 35% 30%, #93f4ff, #5573ff 34%, #5c35a2 62%, transparent 64%); filter: drop-shadow(0 0 30px rgba(83, 120, 255, .45)); animation: mci-orbit-pulse 4s ease-in-out infinite; }
+.mci-console__orbit i:nth-child(1) { transform: rotateX(65deg); animation: mci-orbit 8s linear infinite; }
+.mci-console__orbit i:nth-child(2) { transform: rotateY(65deg); animation: mci-orbit 11s linear reverse infinite; }
+.mci-console__orbit i:nth-child(3) { inset: 24px; border-style: dashed; animation: mci-orbit 14s linear infinite; }
+.mci-console__metric { position: absolute; right: 22px; bottom: 68px; left: 22px; display: grid; grid-template-columns: 1fr auto; align-items: end; padding: 20px; border: 1px solid var(--mci-border); border-radius: 18px; background: rgba(5, 13, 30, .62); backdrop-filter: blur(14px); }
+:root[data-mci-theme="light"] .mci-console__metric { background: rgba(255, 255, 255, .74); }
+.mci-console__metric small { align-self: start; color: var(--mci-text-muted); }
+.mci-console__metric strong { grid-row: span 2; color: var(--mci-cyan); font-size: 52px; line-height: .9; }
+.mci-console__metric span { color: var(--mci-text-muted); font-size: 11px; }
+.mci-console__footer { position: absolute; right: 22px; bottom: 22px; left: 22px; display: flex; justify-content: space-between; color: var(--mci-text-muted); font-size: 9px; letter-spacing: .08em; }
+.mci-section { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 110px 0 120px; border-top: 1px solid var(--mci-border); }
+.mci-section__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
+.mci-section h2, .mci-flow h2, .mci-contract h2 { margin: 14px 0 0; font-size: clamp(34px, 4vw, 52px); line-height: 1.1; letter-spacing: -.045em; }
+.mci-filter { display: flex; gap: 4px; padding: 5px; border: 1px solid var(--mci-border); border-radius: 999px; background: var(--mci-surface); }
+.mci-filter button { min-height: 34px; padding: 0 15px; border: 0; border-radius: 999px; color: var(--mci-text-muted); background: transparent; font-size: 12px; cursor: pointer; }
+.mci-filter button.is-active { color: #fff; background: var(--mci-primary); box-shadow: 0 7px 18px rgba(91, 124, 250, .23); }
+.mci-pattern-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
+.mci-pattern { min-width: 0; padding: 12px; overflow: hidden; border: 1px solid var(--mci-border); border-radius: var(--mci-shape-card); background: var(--mci-surface); box-shadow: var(--mci-shadow-card); transition: opacity .25s ease, transform .25s ease, border-color .25s ease; }
+.mci-pattern:hover { transform: translateY(-4px); border-color: rgba(107, 135, 255, .4); }
+.mci-pattern.is-hidden { display: none; }
+.mci-pattern__visual { position: relative; height: 318px; padding: 28px; overflow: hidden; border-radius: calc(var(--mci-shape-card) - 10px); background: #101b33; color: #fff; }
+.mci-pattern__index { position: absolute; z-index: 3; top: 20px; right: 22px; color: rgba(255, 255, 255, .55); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
+.mci-pattern__copy { padding: 20px 12px 14px; }
+.mci-pattern__copy > span { color: var(--mci-primary); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
+.mci-pattern__copy h3 { margin: 9px 0 8px; font-size: 22px; letter-spacing: -.025em; }
+.mci-pattern__copy p { margin: 0; color: var(--mci-text-muted); font-size: 13px; line-height: 1.7; }
+.mci-pattern--story .mci-pattern__visual { background: #f2f0e8; color: #151515; }
+.mci-pattern--story .mci-pattern__visual::before { position: absolute; right: -40px; bottom: -100px; width: 260px; height: 260px; content: ""; border-radius: 50%; background: #ff4f3d; opacity: .9; }
+.mci-story-word { position: absolute; top: 76px; left: 28px; z-index: 1; font-size: clamp(46px, 5vw, 70px); font-weight: 900; line-height: .82; letter-spacing: -.08em; }
+.mci-story-word em { color: #3e52df; font-style: normal; }
+.mci-story-line { position: absolute; right: 28px; bottom: 30px; left: 28px; height: 1px; background: rgba(0, 0, 0, .32); }
+.mci-story-line::before { position: absolute; left: 0; bottom: 10px; content: "THE IDEA BECOMES THE INTERFACE"; font-size: 9px; font-style: normal; letter-spacing: .14em; }
+.mci-pattern--product .mci-pattern__visual { display: grid; place-items: center; background: radial-gradient(circle at 0 0, #dce6ff, transparent 45%), #f5f7fb; color: #18233c; }
+.mci-phone-card { width: min(330px, 90%); padding: 20px; border: 1px solid #e2e7f1; border-radius: 22px; background: #fff; box-shadow: 0 22px 55px rgba(38, 54, 94, .18); }
+.mci-phone-card__bar { display: flex; align-items: center; gap: 9px; font-size: 11px; }
+.mci-phone-card__bar i { width: 24px; height: 24px; border-radius: 8px; background: #5b7cfa; }
+.mci-phone-card__bar b { margin-left: auto; color: #7c889f; font-size: 9px; }
+.mci-phone-card__progress { height: 3px; margin: 14px 0 20px; overflow: hidden; border-radius: 4px; background: #edf0f6; }
+.mci-phone-card__progress i { display: block; width: 66%; height: 100%; background: #5b7cfa; }
+.mci-phone-card > strong { display: block; margin-bottom: 12px; font-size: 14px; }
+.mci-phone-card__choice { display: grid; grid-template-columns: 24px 1fr; gap: 10px; margin-top: 8px; padding: 11px; border: 1px solid #e5e9f1; border-radius: 12px; }
+.mci-phone-card__choice > i { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #d0d7e5; border-radius: 50%; font-size: 10px; font-style: normal; }
+.mci-phone-card__choice span { font-size: 11px; font-weight: 700; }
+.mci-phone-card__choice small { display: block; margin-top: 3px; color: #8a96ab; font-size: 8px; font-weight: 400; }
+.mci-phone-card__choice.is-selected { border-color: #5b7cfa; background: #f2f5ff; }
+.mci-phone-card__choice.is-selected > i { color: white; border-color: #5b7cfa; background: #5b7cfa; }
+.mci-pattern--editorial .mci-pattern__visual { background: #ffcd55; color: #191919; }
+.mci-editorial-type { position: absolute; top: 38px; left: 32px; display: flex; align-items: start; gap: 14px; }
+.mci-editorial-type b { font-size: 114px; line-height: .85; letter-spacing: -.1em; }
+.mci-editorial-type span { max-width: 95px; padding-top: 10px; font-size: 13px; font-weight: 700; line-height: 1.4; }
+.mci-editorial-card { position: absolute; right: -20px; bottom: -44px; width: 285px; height: 190px; padding: 22px; transform: rotate(-7deg); background: #3527a5; box-shadow: 0 20px 50px rgba(47, 38, 132, .3); }
+.mci-editorial-card i { display: inline-block; width: 42px; height: 42px; margin-right: -6px; border: 2px solid #fff; border-radius: 50%; }
+.mci-editorial-card i:nth-child(2) { background: #ff6257; }
+.mci-editorial-card i:nth-child(3) { background: #5ce3cc; }
+.mci-editorial-card strong { display: block; margin-top: 18px; color: #fff; font-size: 25px; }
+.mci-pattern--immersive .mci-pattern__visual { background: radial-gradient(circle at 52% 48%, #1c3350, #050914 70%); }
+.mci-pattern--immersive .mci-pattern__visual::before { position: absolute; inset: 0; content: ""; background-image: linear-gradient(rgba(73, 220, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(73, 220, 255, .05) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, black, transparent); }
+.mci-orb { position: absolute; top: 50%; left: 50%; width: 180px; height: 180px; transform: translate(-50%, -58%); }
+.mci-orb::before { position: absolute; inset: 34px; content: ""; border-radius: 38% 62% 44% 56%; background: radial-gradient(circle at 34% 28%, #eaffff, #61eaff 16%, #5d63fa 54%, #17165e 72%); filter: drop-shadow(0 0 34px rgba(80, 201, 255, .5)); animation: mci-blob 7s ease-in-out infinite; }
+.mci-orb i { position: absolute; inset: 0; border: 1px solid rgba(107, 222, 255, .35); border-radius: 50%; }
+.mci-orb i:nth-child(1) { transform: rotateX(72deg); }
+.mci-orb i:nth-child(2) { transform: rotateY(72deg); }
+.mci-orb i:nth-child(3) { inset: 20px; border-style: dashed; animation: mci-orbit 12s linear infinite; }
+.mci-orb b { position: absolute; top: 22px; right: 18px; width: 9px; height: 9px; border-radius: 50%; background: #62efff; box-shadow: 0 0 16px #62efff; animation: mci-point 4s ease-in-out infinite; }
+.mci-orb-copy { position: absolute; right: 24px; bottom: 22px; left: 24px; display: flex; justify-content: space-between; color: rgba(255, 255, 255, .62); font-size: 9px; letter-spacing: .08em; }
+.mci-pattern--motion .mci-pattern__visual { background: #f8f7fc; color: #121526; }
+.mci-pattern--motion .mci-pattern__visual::after { position: absolute; top: -120px; right: -80px; width: 300px; height: 300px; content: ""; border-radius: 50%; background: conic-gradient(from 35deg, #7259ff, #44dcff, #ff76ac, #7259ff); filter: blur(20px); opacity: .72; animation: mci-spin 10s linear infinite; }
+.mci-motion-copy { position: absolute; z-index: 1; top: 44px; left: 32px; }
+.mci-motion-copy small { display: block; margin-bottom: 22px; color: #5a6680; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
+.mci-motion-copy strong { font-size: 52px; line-height: .95; letter-spacing: -.06em; }
+.mci-motion-track { position: absolute; z-index: 1; right: 32px; bottom: 28px; left: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
+.mci-motion-track i { height: 4px; border-radius: 6px; background: #dfe3ed; }
+.mci-motion-track i:nth-child(1), .mci-motion-track i:nth-child(2) { background: #5b7cfa; }
+.mci-pattern--data .mci-pattern__visual { background: #0c1729; }
+.mci-data-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
+.mci-data-head span { font-size: 13px; font-weight: 700; }
+.mci-data-head b { padding: 5px 8px; border: 1px solid rgba(38, 215, 176, .3); border-radius: 999px; color: #6ff0d2; font-size: 8px; }
+.mci-data-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
+.mci-data-metrics > span { padding: 11px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 11px; background: rgba(255, 255, 255, .03); }
+.mci-data-metrics small { display: block; margin-bottom: 8px; color: rgba(255, 255, 255, .5); font-size: 8px; }
+.mci-data-metrics b { font-size: 22px; }
+.mci-data-chart { display: flex; height: 112px; align-items: end; gap: 8px; padding: 14px 10px 0; border-top: 1px solid rgba(255, 255, 255, .06); background: linear-gradient(to top, rgba(91, 124, 250, .08), transparent); }
+.mci-data-chart i { flex: 1; height: var(--h, 50%); border-radius: 5px 5px 1px 1px; background: linear-gradient(to top, #536bf0, #46dffc); transform-origin: bottom; animation: mci-bars 2.6s ease-in-out infinite alternate; }
+.mci-data-chart i:nth-child(1) { --h: 42%; }
+.mci-data-chart i:nth-child(2) { --h: 66%; animation-delay: -.3s; }
+.mci-data-chart i:nth-child(3) { --h: 51%; animation-delay: -.6s; }
+.mci-data-chart i:nth-child(4) { --h: 88%; animation-delay: -.9s; }
+.mci-data-chart i:nth-child(5) { --h: 72%; animation-delay: -1.2s; }
+.mci-data-chart i:nth-child(6) { --h: 96%; animation-delay: -1.5s; }
+.mci-data-chart i:nth-child(7) { --h: 78%; animation-delay: -1.8s; }
+.mci-flow { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 8vw, 110px); align-items: center; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 110px 0; border-top: 1px solid var(--mci-border); }
+.mci-flow__intro > p { max-width: 520px; margin: 22px 0; color: var(--mci-text-muted); line-height: 1.8; }
+.mci-flow__intro ul { display: grid; gap: 8px; margin: 32px 0 0; padding: 0; list-style: none; }
+.mci-flow__intro li { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--mci-border); font-size: 13px; }
+.mci-flow__intro li span { color: var(--mci-primary); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
+.mci-flow-card { min-height: 480px; padding: clamp(24px, 4vw, 42px); border: 1px solid var(--mci-border); border-radius: var(--mci-shape-card); background: var(--mci-surface); box-shadow: var(--mci-shadow-card); }
+.mci-flow-card__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 23px; border-bottom: 1px solid var(--mci-border); }
+.mci-flow-card__head span { font-size: 20px; font-weight: 750; }
+.mci-flow-card__head small { color: var(--mci-text-muted); font-size: 10px; }
+.mci-field { display: grid; gap: 9px; margin-top: 26px; }
+.mci-field > span, .mci-plan-group legend { font-size: 12px; font-weight: 700; }
+.mci-field input { width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--mci-border); border-radius: var(--mci-shape-input); outline: 0; color: var(--mci-text); background: var(--mci-bg-soft); transition: border .2s, box-shadow .2s; }
+.mci-field input:focus { border-color: var(--mci-primary); box-shadow: 0 0 0 3px rgba(91, 124, 250, .15); }
+.mci-field small { color: var(--mci-text-muted); font-size: 10px; }
+.mci-plan-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 0; padding: 0; border: 0; }
+.mci-plan-group legend { grid-column: 1 / -1; margin-bottom: 8px; }
+.mci-plan-group label { position: relative; cursor: pointer; }
+.mci-plan-group input { position: absolute; opacity: 0; pointer-events: none; }
+.mci-plan-group label > span { display: block; padding: 14px; border: 1px solid var(--mci-border); border-radius: var(--mci-shape-input); background: var(--mci-bg-soft); transition: .2s ease; }
+.mci-plan-group input:checked + span { border-color: var(--mci-primary); box-shadow: inset 0 0 0 1px var(--mci-primary); }
+.mci-plan-group b, .mci-plan-group small { display: block; font-size: 11px; }
+.mci-plan-group small { margin-top: 5px; color: var(--mci-text-muted); font-size: 9px; }
+.mci-flow-card__status { min-height: 42px; margin: 20px 0 12px; padding: 12px 14px; border-radius: 11px; color: var(--mci-text-muted); background: rgba(107, 135, 255, .08); font-size: 11px; line-height: 1.6; }
+.mci-flow-card__status.is-error { color: var(--mci-danger); background: rgba(255, 107, 136, .09); }
+.mci-flow-card__status.is-success { color: var(--mci-success); background: rgba(38, 215, 176, .09); }
+.mci-flow-card__submit { width: 100%; border: 0; }
+.mci-flow-card__submit.is-loading i { display: block; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: white; border-radius: 50%; font-size: 0; animation: mci-spin .7s linear infinite; }
+.mci-contract { display: grid; grid-template-columns: 1.1fr .7fr .95fr; gap: 28px; align-items: stretch; width: min(1180px, calc(100% - 40px)); margin: 0 auto 100px; padding: clamp(28px, 5vw, 54px); border: 1px solid rgba(107, 135, 255, .28); border-radius: 34px; background: linear-gradient(145deg, rgba(91, 124, 250, .15), var(--mci-surface)); box-shadow: var(--mci-shadow-card); }
+.mci-contract h2 { font-size: clamp(29px, 3vw, 42px); }
+.mci-contract__copy p { margin: 18px 0 0; color: var(--mci-text-muted); font-size: 13px; line-height: 1.8; }
+.mci-contract__tokens { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.mci-contract__tokens > span { padding: 13px; border: 1px solid var(--mci-border); border-radius: 14px; background: var(--mci-bg-soft); }
+.mci-contract__tokens i { display: block; width: 100%; height: 42px; margin-bottom: 10px; border-radius: 9px; background: var(--token); }
+.mci-contract__tokens b, .mci-contract__tokens small { display: block; font-size: 9px; }
+.mci-contract__tokens small { margin-top: 3px; color: var(--mci-text-muted); }
+.mci-contract__code { display: flex; align-items: center; margin: 0; padding: 22px; overflow: auto; border: 1px solid var(--mci-border); border-radius: 18px; color: #c7d3eb; background: #07101e; font: 11px/1.9 "Cascadia Code", Consolas, monospace; }
+.mci-contract__code span { color: #72e7ff; }
+.mci-lab__footer { display: flex; justify-content: space-between; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 30px 0 42px; border-top: 1px solid var(--mci-border); color: var(--mci-text-muted); font-size: 10px; letter-spacing: .08em; }
+@keyframes mci-drift { to { transform: translate3d(-18px, 14px, 0) scale(1.03); } }
+@keyframes mci-orbit { to { transform: rotate(360deg); } }
+@keyframes mci-orbit-pulse { 50% { transform: scale(.94) rotate(8deg); filter: drop-shadow(0 0 46px rgba(83, 120, 255, .62)); } }
+@keyframes mci-blob { 50% { transform: rotate(14deg) scale(.92); border-radius: 58% 42% 64% 36%; } }
+@keyframes mci-point { 50% { transform: translate(-130px, 128px); } }
+@keyframes mci-spin { to { transform: rotate(360deg); } }
+@keyframes mci-bars { to { transform: scaleY(.65); opacity: .72; } }
+@media (max-width: 900px) {
+  .mci-lab__nav { grid-template-columns: 1fr auto; }
+  .mci-lab__nav-links { display: none; }
+  .mci-hero { grid-template-columns: 1fr; gap: 50px; padding-top: 64px; }
+  .mci-hero__console { width: min(560px, 100%); }
+  .mci-flow { grid-template-columns: 1fr; }
+  .mci-contract { grid-template-columns: 1fr 1fr; }
+  .mci-contract__copy { grid-column: 1 / -1; }
+}
+@media (max-width: 680px) {
+  .mci-lab__nav, .mci-hero, .mci-section, .mci-flow, .mci-contract, .mci-lab__footer { width: min(100% - 28px, 1180px); }
+  .mci-lab__nav { height: 68px; }
+  .mci-lab__brand { font-size: 12px; }
+  .mci-lab__brand-mark { width: 30px; height: 30px; border-radius: 9px; }
+  .mci-icon-button { width: 62px; height: 34px; }
+  .mci-hero { min-height: auto; padding: 64px 0 70px; }
+  .mci-hero h1 { margin-top: 20px; font-size: clamp(48px, 14vw, 64px); }
+  .mci-hero__content > p { font-size: 14px; line-height: 1.75; }
+  .mci-hero__actions, .mci-hero__actions .mci-button { width: 100%; }
+  .mci-hero__console { min-height: 360px; border-radius: 26px; }
+  .mci-console__orbit { top: 78px; transform: translateX(-50%) scale(.82); }
+  .mci-section { padding: 80px 0; }
+  .mci-section__head { display: grid; align-items: start; }
+  .mci-filter { width: 100%; overflow-x: auto; border-radius: 14px; }
+  .mci-filter button { flex: 0 0 auto; }
+  .mci-pattern-grid { grid-template-columns: 1fr; }
+  .mci-pattern__visual { height: 286px; padding: 22px; }
+  .mci-story-word { left: 22px; font-size: 55px; }
+  .mci-editorial-type b { font-size: 92px; }
+  .mci-flow { padding: 80px 0; }
+  .mci-flow-card { min-height: 0; padding: 22px; }
+  .mci-flow-card__head { display: grid; gap: 7px; }
+  .mci-plan-group { grid-template-columns: 1fr; }
+  .mci-contract { grid-template-columns: 1fr; margin-bottom: 60px; padding: 24px; border-radius: 26px; }
+  .mci-contract__copy { grid-column: auto; }
+  .mci-contract__code { min-height: 210px; }
+  .mci-lab__footer { display: grid; gap: 8px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  .mci-lab *, .mci-lab *::before, .mci-lab *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
+}

package/dist/microi.skills/ui-design/assets/templates/MCI-DESIGN.md ADDED Viewed

@@ -0,0 +1,98 @@
+# MCI-DESIGN
+## 1. 产品目标
+- 页面服务的用户：
+- 用户进入页面后的首要任务：
+- 首屏必须回答的问题：
+- 成功衡量方式：
+## 2. 设计模式
+- 主模式：品牌叙事 / 真实产品流程 / 趋势构图 / 沉浸互动 / 动态首屏 / 数据工作台
+- 辅助能力（最多两项）：
+- 明确不采用的视觉手法：
+## 3. 信息架构
+1. 首屏：
+2. 核心任务：
+3. 证据或数据：
+4. 辅助内容：
+5. 最终行动：
+## 4. Design Tokens
+```yaml
+color:
+  background: var(--mci-bg)
+  surface: var(--mci-surface)
+  text: var(--mci-text)
+  muted: var(--mci-text-muted)
+  primary: var(--mci-primary)
+  success: var(--mci-success)
+  warning: var(--mci-warning)
+  danger: var(--mci-danger)
+spacing: [4, 8, 12, 16, 24, 32, 48, 64]
+radius:
+  input: var(--mci-shape-input)
+  panel: var(--mci-shape-panel)
+  card: var(--mci-shape-card)
+  button: var(--mci-shape-button)
+shadow:
+  card: var(--mci-shadow-card)
+  float: var(--mci-shadow-float)
+```
+## 5. 字体层级
+| 用途 | 桌面 | 移动 | 字重 | 行高 |
+| --- | ---: | ---: | ---: | ---: |
+| Display | 64 | 40 | 700 | 1.05 |
+| H1 | 40 | 32 | 700 | 1.15 |
+| H2 | 28 | 24 | 650 | 1.25 |
+| Body | 16 | 15 | 400 | 1.7 |
+| Meta | 13 | 12 | 500 | 1.5 |
+## 6. 组件与状态
+| 组件 | 默认 | Hover / Pressed | Loading | Empty | Error | Disabled | Success |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| 主按钮 |  |  |  | - |  |  |  |
+| 搜索 / 筛选 |  |  |  |  |  |  |  |
+| 列表 / 卡片 |  |  |  |  |  | - |  |
+| 表单 |  |  |  | - |  |  |  |
+## 7. 动效时间线
+- 0—120ms：
+- 120—360ms：
+- 360—800ms：
+- 循环动效：
+- `prefers-reduced-motion` 降级：
+## 8. 响应式
+| 宽度 | 栅格 | 导航 | 主操作 | 内容重排 |
+| --- | --- | --- | --- | --- |
+| 390 | 4 列 |  |  |  |
+| 768 | 8 列 |  |  |  |
+| 1440 | 12 列 |  |  |  |
+## 9. 媒体与性能
+- 图片格式、尺寸与 `object-fit`：
+- 视频 / Canvas / WebGL 的存在理由：
+- 静态降级资源：
+- 首屏资源预算：
+- 失败与超时处理：
+## 10. 验收清单
+- [ ] 首屏在 3 秒内说清产品、对象和主操作。
+- [ ] 默认、加载、空、错误、禁用、权限、成功状态可验证。
+- [ ] 390 / 768 / 1440 无横向滚动、遮挡和错位。
+- [ ] 明亮、暗黑主题均有足够对比度。
+- [ ] 所有可点击元素有 hover/focus/pressed 和真实结果。
+- [ ] 动效尊重 `prefers-reduced-motion`。
+- [ ] 所有图片、字体、模型和代码资产来源合法且可离线构建。