Files
AOS/skills/design/design-templates/ascii-cosmos/styles.md
T
Z User e45b68bb8b feat: IMAP mail sync with thread-to-contact matching (PRD §6.1)
Real IMAP connection via imapflow library:
- Connects to IMAP server (IMAPFlow, TLS on port 993)
- Fetches recent messages (configurable limit, default 20)
- Extracts: from, fromEmail, subject, date, snippet (200 chars)
- Thread-to-contact matching (PRD §6.1):
  1. Match sender email against persons table
  2. If no person match, extract domain and match against company.website
  3. Returns matchedCompany + matchedPerson for each email
- Audit-logged (action: crm.mailsync:imap)
- Zod validated (host, port, user, password, folder, limit)
- 502 on IMAP connection failure with detail
- 400 on validation failure

Tested: invalid creds → 502 'IMAP connection failed', missing host → 400
2026-10-27 22:50:50 +00:00

6.1 KiB
Executable File
Raw Blame History

风格预设库

每个预设给 8 个 :root CSS 变量 + 5 个 ASCII 层颜色 + hero 背景渐变。改其他地方需要相应连带改(图片滤镜、scrambler 字符颜色等)。

配色原则:5 个 ASCII 层在背景上必须同时可读 + 互相和谐。同一冷暖、轻微变奏,不要把"对比 = 好看"。


1. 深空青(默认 · cosmic-cyan)

最克制的太空感,宝石蓝紫为底,青/粉/琥珀的发光层。适合本地优先 AI、笔记/写作、独立软件、CLI 工具。

:root{
  --bg:#05060f;
  --fg:#e6e8ff;
  --dim:#7a7fa8;
  --accent:#8be9ff;     /* 青 */
  --accent2:#ff6ad5;    /* 粉 */
  --accent3:#c792ea;    /* 紫 */
  --line:#1a1d3a;
  --hl:#0d1024;
  --paper:#0a0c1f;
}
.hero{ background: radial-gradient(ellipse at 30% 20%, #1a0a2e 0%, #05060f 55%, #000 100%); }
#ascii-nebula  { color:#a87bd6; }   /* 星云 */
#ascii-stars   { color:#cfe6ff; }   /* 星点 */
#ascii-planet  { color:#8be9ff; }   /* 行星 */
#ascii-asteroids{ color:#f5b971; }  /* 小行星 */
#ascii-comets  { color:#ff8fd2; }   /* 彗星 */

图片滤镜:hue-rotate(200deg) saturate(.9) contrast(1.1) brightness(.6)


2. 暖色羊皮纸(letterpress-warm · 原墨思配色)

宋体凸印 + 米色背景,复古旧报纸感。适合中文写作工具、独立出版、设计工作室、小众杂志。

:root{
  --bg:#F3E4D4;
  --fg:#1f1510;
  --dim:#8a7560;
  --accent:#660125;     /* 酒红 */
  --accent2:#a83344;
  --accent3:#7a4a1f;
  --line:#d8c4af;
  --hl:#ecd8ca;
  --paper:#ecd8ca;
}
.hero{ background: linear-gradient(180deg, #F3E4D4 0%, #e9d2b8 100%); }
#ascii-nebula  { color:#b88a6a; opacity:.5; mix-blend-mode:multiply; }
#ascii-stars   { color:#5a3a1e; opacity:.7; }
#ascii-planet  { color:#660125; }
#ascii-asteroids{ color:#7a4a1f; }
#ascii-comets  { color:#a83344; }

图片滤镜:sepia(.3) contrast(1.05) saturate(.85) brightness(.95) 注:暖色背景下要把 mix-blend-mode: screen 改成 multiply,让 ASCII 是"压在纸上"而不是"发光"。


3. 赛博紫(cyber-violet)

霓虹紫 + 电子粉,赛博朋克招牌色。适合 AI / Web3 / 游戏外设 / 电竞订阅。

:root{
  --bg:#0a0118;
  --fg:#f0e6ff;
  --dim:#7e5cab;
  --accent:#ff00aa;     /* 霓虹品红 */
  --accent2:#00ffe0;    /* 青电流 */
  --accent3:#b14aff;    /* 紫 */
  --line:#2a0d4a;
  --hl:#150327;
  --paper:#10021f;
}
.hero{ background: radial-gradient(ellipse at 70% 30%, #4a0e6e 0%, #0a0118 60%, #000 100%); }
#ascii-nebula  { color:#b14aff; opacity:.55; }
#ascii-stars   { color:#e0d4ff; }
#ascii-planet  { color:#00ffe0; }
#ascii-asteroids{ color:#ff00aa; }
#ascii-comets  { color:#ffd400; }   /* 黄电流彗星 */

图片滤镜:hue-rotate(280deg) saturate(1.4) contrast(1.1) brightness(.65)


4. 终端绿(terminal-green)

黑底 phosphor 绿,复古 CRT 终端味。适合 CLI 工具、开发者订阅、安全产品、复古游戏。

:root{
  --bg:#000800;
  --fg:#a8ffb0;
  --dim:#5fa05f;
  --accent:#00ff66;     /* phosphor 绿 */
  --accent2:#80ff80;
  --accent3:#ffaa44;
  --line:#0a3010;
  --hl:#001500;
  --paper:#001a05;
}
.hero{ background: radial-gradient(ellipse at center, #052010 0%, #000800 70%, #000 100%); }
#ascii-nebula  { color:#2a8a44; opacity:.45; }
#ascii-stars   { color:#a8ffb0; }
#ascii-planet  { color:#00ff66; }
#ascii-asteroids{ color:#ffaa44; }
#ascii-comets  { color:#80ffd4; }

图片滤镜:grayscale(1) brightness(.6) sepia(1) hue-rotate(70deg) saturate(2) 另外可在 .hero::after 加扫描线:background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,255,102,.05) 3px, rgba(0,255,102,.05) 4px);


5. 极光(aurora · 默认风格的冷淡变奏)

灰青冰蓝主色,加一抹粉绿,像北极极光。适合冥想 / 健康 / 旅行 / 北欧风产品。

:root{
  --bg:#0c1420;
  --fg:#dceaf0;
  --dim:#6b8499;
  --accent:#7fe3c4;     /* 极光绿 */
  --accent2:#b8a4ff;    /* 淡紫 */
  --accent3:#ffb3c1;    /* 极光粉 */
  --line:#1a2638;
  --hl:#101a28;
  --paper:#0e1622;
}
.hero{ background: linear-gradient(160deg, #1a3548 0%, #0c1420 50%, #050810 100%); }
#ascii-nebula  { color:#b8a4ff; opacity:.5; }
#ascii-stars   { color:#dceaf0; }
#ascii-planet  { color:#7fe3c4; }
#ascii-asteroids{ color:#ffb3c1; }
#ascii-comets  { color:#88ddff; }

图片滤镜:hue-rotate(180deg) saturate(.7) contrast(1.05) brightness(.7)


6. 沙漠日落(desert-sunset · 暖色 ASCII 系)

橙红土 + 焦糖 + 杏色,沙丘黄昏感。适合咖啡 / 独立硬件 / 工艺品 / 食品订阅。

:root{
  --bg:#1a0a05;
  --fg:#f5e6d0;
  --dim:#a8765a;
  --accent:#ff8b3d;     /* 烤橙 */
  --accent2:#d94545;    /* 焦红 */
  --accent3:#ffd47a;    /* 杏黄 */
  --line:#3a1a10;
  --hl:#1f0d06;
  --paper:#15080a;
}
.hero{ background: radial-gradient(ellipse at 50% 80%, #5a1f10 0%, #1a0a05 60%, #000 100%); }
#ascii-nebula  { color:#a8765a; opacity:.5; }
#ascii-stars   { color:#ffd47a; }
#ascii-planet  { color:#ff8b3d; }
#ascii-asteroids{ color:#d94545; }
#ascii-comets  { color:#ffe9c2; }

图片滤镜:sepia(.5) saturate(1.3) contrast(1.1) brightness(.7) hue-rotate(-10deg)


怎么自由设计

如果用户给的风格描述不在以上 6 种里,按这个流程:

  1. 定主色调温度:冷(蓝/紫/青)/ 暖(橙/红/黄)/ 中性(绿/灰)
  2. --bg 选最深值(如 #05060f),--fg 选最浅值(如 #e6e8ff)
  3. --accent / --accent2 / --accent3 三色:拉开色相而非饱和度,它们在小区域出现,要"互相点亮"
  4. 5 个 ASCII 层颜色 排序原则:
    • nebula → 半透紫/灰,做底
    • stars → 高明度白/暖白,最亮
    • planet → 主 --accent
    • asteroids → 暖色对比(即使主调冷也加暖一抹)
    • comets → 第二高饱和,做"流过去"的视觉锚
  5. 图片滤镜 必须连带调,否则 unsplash 图会"颜色不进环境"

测试方法:把 5 个层颜色填进调色板生成器(Coolors / Realtime Colors),确认它们之间最低对比度 ≥ 2.0,最高色相差 ≥ 90°。