sky-skills · atelier-design · demo
All skills全部 skill

atelier-design

warm-glass product UI暖玻璃产品界面

Eight of the nine design skills in this repo draw documents — landing pages, pricing tables, docs sites, decks. This one draws applications: sidebars, KPI rows, filter panels, record tables, booking flows, settings forms. Its JavaScript is not decoration, it is half the deliverable. 这个仓库里九个设计 skill 有八个画的是文档——落地页、定价表、文档站、汇报 deck。这一个画的是应用：侧栏、KPI 行、筛选面板、记录表、预订流、设置表单。它的 JavaScript 不是装饰，是交付物的一半。

5 canonical screens5 个范本页 2 themes双主题 12 attribute-driven behaviours12 种属性驱动交互 bilingual EN / 中文中英双语

The five screens五个屏幕

A whole product path, from the front door to the deepest record. Every one of them passes all four review gates and has been looked at by a human. 一条完整的产品路径，从门口一直到最深的那条记录。五个页面全部通过四道机械审查，并且都被人眼看过。

01 · signin Sign in登录 A split shell instead of the centred box every glass kit ships. The error names the fix, not the failure. 分栏壳，而不是每个玻璃套件都送的居中方框。错误提示给的是下一步，不是"操作失败"。 Open →打开 → 02 · dashboard Console控制台 KPI row, seven-cycle bar chart, ranked list, one ink card, a sortable table, and a rail that really routes. KPI 行、七周期柱状图、绩效榜、一张暗卡、可排序表格，以及一条真能切换的侧栏。 Open →打开 → 03 · booking Search & book搜索与预订 No rail at all. Filter accordions, expandable fare rows, an itinerary timeline and a schematic route figure. 完全没有侧栏。折叠筛选、可展开票价行、行程时间轴，还有一张航线示意图。 Open →打开 → 04 · detail Record记录详情 Area chart with a reference line, a four-slice donut, compensation bars, and a change trail across three tab panes. 带参照线的面积图、四片环图、薪酬变更条，以及跨三组标签页的变更轨迹。 Open →打开 → 05 · settings Settings设置 The screen nobody designs. Every switch states its consequence; the destructive action takes four deliberate acts. 没人愿意设计的那一屏。每个开关都写清打开后会怎样；破坏性操作要四个刻意的动作。 Open →打开 →
source来源 Where this comes from这套语言从哪来 Reconstructed from the dashboard work of Ghani Pradita (Paperpillar, Yogyakarta). Nothing is traced — palette, type, components, copy and data are all rewritten. Only the grammar is borrowed. 重建自 Ghani Pradita（印尼日惹 Paperpillar）的仪表盘作品。没有照抄任何一稿——配色、排版、组件、文案、数据全部重写，借的只是这套语言的语法。

Glass is chrome, opacity is data玻璃是外壳，不透明度是数据

The single rule that keeps this aesthetic readable: the more a surface carries numbers, the more opaque it gets. Only the shell blurs — nesting a second backdrop-filter costs a full filter pass per frame and is invisible at 0.80 alpha. 让这套美学保持可读的唯一一条规矩：一个表面越承载数字，就越往不透明走。只有外壳做模糊——再套一层 backdrop-filter，每帧多跑一整条滤镜链，而在 0.80 不透明度下根本看不出来。

0.32 shell · blur 42px外壳 · 模糊 42px
0.80 data card数据卡
0.94 table · expanded表格 · 展开态

These three sit directly on the wallpaper so the difference is visible — nested inside a card they would all composite over the same opaque base and look identical. Test for yourself: if you can see the wallpaper shifting behind a KPI number, the alpha is too high. 这三格直接压在壁纸上，差别才看得出来——套进卡片里，三者会合成在同一个不透明底上，看起来完全一样。自测判据：如果你能透过 KPI 数字看见壁纸的颜色变化，alpha 就开大了。

Palette配色

Gradient · orbs, bars, meters渐变 · 圆球 / 柱 / 进度条 #DD4F92 rose · identity玫红 · 身份色 #F5854F coral · gradient only珊瑚 · 只在渐变里 #B83370 rose as text · 5.1:1玫红作文字 · 5.1:1 #211C1A the one ink card那一张暗卡

White text on the coral stop measures 2.5:1 — it fails AA at every size. That is why the gradient never carries text and filled buttons use the solid deep rose. 白字压在珊瑚端实测只有 2.5:1，任何字号都不过 AA。所以渐变永远不承载文字，实心按钮用的是那个更深的玫红。

Interaction lab — everything below is live交互实验室 —— 下面的都能点

Every behaviour is a data-* attribute on markup. A page written with this skill contains no atelier JavaScript at all. Click things. 每个行为都是写在 markup 上的 data-* 属性。用这个 skill 写出来的页面里一行 atelier JS 都没有。随便点。

Rail routing侧栏路由

data-route

Every pane's markup ships in the page and toggles with [hidden]. Nothing is fetched, nothing is built at runtime — a reader with JavaScript off still has all of it in the DOM. 所有面板的 markup 都写在页面里，用 [hidden] 切换。不 fetch、不在运行时构建——JS 关掉，内容依然全在 DOM 里。

Count-up & segmented数字滚动与分段控件

data-count-to
147,280

The final string 147,280 is written in the markup. JS animates toward it and then restores the original text — so the comma is never reconstructed and never drifts. The segmented control is decorative on purpose: switching it does not rewrite the figure, because a reference page must not display data it cannot source. 终值 147,280 写在 markup 里。JS 朝它滚动，结束后恢复原始文本——所以千分位逗号永远不会被重建、也就不会漂。分段控件是故意做成装饰的：切换它不会改写数字，因为范本页不能显示查不到来源的数据。

Accordion & switch手风琴与开关

data-accordion
Lock scores at the deadline截止后锁定评分 On: late reviews land in the NEXT cycle. This is what put 34 reviews into July and dropped June to 31%. 开启后，迟交的评估会落入下一个周期。研发那 34 份就是这样落到 7 月，把 6 月压到 31% 的。

Sortable table可排序表格

data-sort
Judy Abbott Studio 92
Martin Feeney Platform 78
Ellen Streich Field 66
Toni Bergstrom People 34

Click a header. Sorting reads data-value when present, so a cell can display “IDR 28.5M” and sort as 28500000. 点表头。排序优先读 data-value，所以单元格可以显示「IDR 28.5M」而按 28500000 排序。

Charts — one ramp, one neutral track图表 —— 一条渐变，一层中性轨道

Every series figure is the coral→rose ramp over --atl-track. The track is not decoration: without it a 31% bar only reads as “short”; with it, it reads as “31 out of 100”. Second hues are reserved for reference geometry, verdicts, and composition slices — never for series. 所有序列图形都是珊瑚→玫红渐变压在 --atl-track 上。轨道不是装饰：没有它，31% 的柱子只读作「矮」；有了它，它读作「100 里的 31」。第二个色只留给参照几何、判断结论和构成切片——绝不用于序列。

Round-cap bars over a track灰轨道 + 圆头柱

value实际 ceiling上限

Area with a reference line面积图 + 参照线

+14
92 median 71 Q1 25Q3 25 Q1 26Q3 26

All <text> is painted last. A translucent area fill drawn after a label covers it — that exact bug was caught by the review gate on this skill's own detail page. 所有 <text> 最后绘制。半透明面积填充画在标签之后会把它盖住——这个 bug 就是渲染审查在本 skill 自己的 detail 页上抓到的。

Donut — four slices, hard ceiling环图 —— 四片，硬上限

38 hrs/wk
Product design产品设计 46% Design system设计系统 24% Mentoring带人 18% Recruiting招聘 12%

Four is the ceiling. Past four the arcs stop being comparable and the chart needs a legend to be readable at all — which means it has stopped working. 四片是上限。超过四片弧长不再可比，图必须靠图例才读得懂——那说明它已经不工作了。

Schematic figure & proportion bars示意图与比例条

YIA SIN 1 157 km
The dot field is a CSS radial-gradient, so the SVG holds six elements instead of four hundred circles — and the caption admits it is schematic, not a navigation chart. 点阵是 CSS radial-gradient，所以 SVG 里只有 6 个元素而不是 400 个圆点——说明里也直说它是示意图，不是航行图。
11.7%
32.1%
56.2%

Three rules that do not bend三条不可让步的规矩

1 The gradient never carries text渐变永远不承载文字 White on the coral stop is 2.5:1 — failing AA at every size. Filled buttons take the solid deep rose (5.1:1) or the near-black default. The ramp lives on orbs, bars, meters and the brand mark. 白字压在珊瑚端是 2.5:1，任何字号都不过 AA。实心按钮用更深的玫红（5.1:1）或默认近黑。渐变只出现在圆球、柱子、进度条和品牌标记上。
2 Glass is chrome, opacity is data玻璃是外壳，不透明度是数据 0.32 shell → 0.80 data card → 0.94 table. Numbers over a moving gradient are numbers you read twice, and nobody pays that for prettier glass. 外壳 0.32 → 数据卡 0.80 → 表格 0.94。数字压在会动的渐变上要读两遍，没人愿意为「更好看的玻璃」付这个代价。
3 Exactly one ink card per screen每屏恰好一张暗卡 On a page this light, the dark card is where the eye lands first. Two of them split the landing and neither wins. It holds the thing that needs doing, not the summary. 在这么亮的页面上，暗卡是视线第一落点。两张就分裂了落点，两张都不赢。它装的是要做的事，不是汇总。

When NOT to use it什么时候别用它

There are nine design skills in this repo. Picking the wrong one costs more than picking none. 这个仓里有九个设计 skill。选错一个，比不选还贵。

If you are making…如果你要做的是…… Use用哪个 Why not atelier为什么不是 atelier
A dark aurora-glass showcase page深藏青 aurora 玻璃的展示页 glass Both are glass, but glass is a deep-navy canvas with cyan and light blobs. atelier is daylight, warm, and draws applications.两个都是玻璃，但 glass 是深藏青底 + cyan + 光晕。atelier 是亮底暖色，而且画的是应用。
A landing page, pricing table or docs site落地页、定价表、文档站 anthropic · apple · sage · ember atelier has no hero tier at all. An application has no hero.atelier 根本没有 hero 档。应用没有 hero。
A product launch / keynote产品发布会 / keynote eclat Cinematic dark and full-bleed moments are a different language entirely.暗调电影感和满屏「时刻」是另一套完全不同的语言。
A boardroom review deck会议室商务汇报 deck lectern Gradient orbs read as consumer SaaS. A board pack needs to read as trustworthy, which means low saturation.渐变圆球读作消费级 SaaS。汇报材料需要读作可信，那意味着低饱和。
Anything that gets printed or exported to PDF要打印或导出 PDF 的东西 any non-glass skill任何非玻璃 skill backdrop-filter does not enter the print pipeline. The shell would print as a flat white box.backdrop-filter 不进打印管线。外壳会打印成一个白方块。

Run the gates before you ship交付前先跑审查

Four gates — structural, rendered, accessibility, screenshot — must all be green. And the screenshot must be looked at: on the day this skill was built, the machine gates passed three problems only a human eye caught. Necessary, not sufficient. 四道审查——结构、渲染、可达性、截图——必须全绿。而且截图必须人眼看过：这个 skill 建成当天，机械审查放过了三个只有人眼能发现的问题。四道审查是必要条件，不是充分条件。

bin/design-review --skill=atelier your-page.html