AI 技能AI 插件前端【免費(fèi)下載鏈接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills項(xiàng)目地址https://gitcode.com/gh_mirrors/fr/frontend-slides點(diǎn)擊查看免費(fèi)下載本指南以 GitHub 加速計(jì)劃fr/frontend-slides倉(cāng)庫(kù)中 Bold Template Pack 的Pin Paper模板bold-template-pack/templates/pin-and-paper/design.md為藍(lán)本系統(tǒng)拆解這套「野外筆記本 / 手賬」風(fēng)格幻燈片的完整設(shè)計(jì)規(guī)范。你將掌握其色彩 token 體系、三聲部字體系統(tǒng)、紙面紋理與回形針插圖組件、1920×1080 固定舞臺(tái)渲染模型以及面向中文內(nèi)容的字體配對(duì)與混排策略可直接用于生成風(fēng)格統(tǒng)一、經(jīng)得起審查的 HTML 演示文稿。模板定位一套「筆記本頁(yè)面」而非「演示工具」Pin Paper 的模板索引條目見 bold-template-pack/selection-index.json給出如下定位元數(shù)據(jù)Slugpin-and-paperTaglineYellow paper with safety-pin illustrations, ink-blue handwritten Caveat, paper-grain texture.Moodcrafted、handmade、warm、thoughtful、literaryToneliterary、intimate、warm、groundedFormalitymediumDensitymediumSchemelightBest for一切需要手工質(zhì)感、溫暖與文學(xué)性的內(nèi)容——質(zhì)性研究結(jié)論qualitative research findings、創(chuàng)始人反思、長(zhǎng)篇品牌故事、工作坊復(fù)盤由于回形針插圖與紙紋紋理的存在它同樣適合希望以個(gè)性與溫度取勝的技術(shù)或商業(yè)演示。Avoid for需要「數(shù)字原生化精致感」或「嚴(yán)謹(jǐn)數(shù)據(jù)驅(qū)動(dòng)感」的演示——手寫體 Caveat 刻意非正式。配套的 preview.md 還給出一個(gè)精煉的視覺快照每一頁(yè)都承載 fractal-noise 紙紋覆蓋層手繪安全回形針safety-pinSVG 把卡片「釘」在頁(yè)面上Caveat 手寫字體承載個(gè)人批注Space Grotesk 重字重承載印刷感標(biāo)題DM Mono 承載檔案標(biāo)簽。整體美學(xué)借用模擬野外報(bào)告、復(fù)古公告板與科學(xué)筆記本日記頁(yè)——更像是釘在軟木板上的實(shí)驗(yàn)室日志而非打磨光滑的演示文稿。整套設(shè)計(jì)系統(tǒng)建立在一個(gè)單一材質(zhì)前提上每一頁(yè)都是黃色便簽紙legal pad paper。這個(gè)前提貫穿色彩、紋理、卡片、陰影、旋轉(zhuǎn)角度乃至中文適配的每一個(gè)環(huán)節(jié)是全文理解 Pin Paper 的鑰匙。渲染模型Fixed-Stage 固定舞臺(tái)政策原文檔在正文之前用專門的章節(jié)聲明了Frontend Slides Fixed-Stage Policy這是使用本模板的最高優(yōu)先級(jí)約束當(dāng)該設(shè)計(jì)系統(tǒng)被frontend-slides技能使用時(shí)最終演示必須生成為1920×1080 固定畫布并整體等比縮放到瀏覽器視口?；脽羝诎ㄊ謾C(jī)在內(nèi)的所有屏幕上都應(yīng)保持 16:9 畫布允許 letterbox 或 pillarbox但不得為移動(dòng)端重新排版幻燈片內(nèi)容。這條政策優(yōu)先于文檔內(nèi)任何源模板的響應(yīng)式行為描述。即便源模板原本使用100vw、100vh、vw、vh或clamp()這類視口流式 CSS也必須把這些值當(dāng)作「設(shè)計(jì)比例」換算為 1920×1080 舞臺(tái)坐標(biāo)而不是作為生成文稿中的實(shí)時(shí)響應(yīng)式規(guī)則。這條政策在倉(cāng)庫(kù)中有完整的實(shí)現(xiàn)支撐共三層Web Component 層bold-template-pack/deck-stage.js 定義了deck-stage可復(fù)用組件。其默認(rèn)設(shè)計(jì)尺寸常量為DESIGN_W_DEFAULT 1920、DESIGN_H_DEFAULT 1080L53-L54。核心縮放邏輯在_fit()方法L527-L540const s Math.min(vw / this.designWidth, vh / this.designHeight); this._canvas.style.transform scale( s )即取視口寬/高與設(shè)計(jì)尺寸比例中的較小者用單個(gè)transform: scale()整體縮放畫布。它還支持noscale屬性用于 PPTX 導(dǎo)出場(chǎng)景下按原始尺寸渲染。導(dǎo)航方面組件處理鍵盤←/→、PgUp/PgDn、Space、Home/End、數(shù)字鍵直達(dá)、R復(fù)位、觸摸左/右三分區(qū) tap zones與鼠標(biāo)滾輪/點(diǎn)擊并派發(fā)slidechangeCustomEvent 供宿主監(jiān)聽?；脽羝捎谩鸽[藏而非卸載」策略visibility: hiddenopacity: 0保留非活動(dòng)頁(yè)的 iframe、表單等狀態(tài)。強(qiáng)制基礎(chǔ) CSS 層viewport-base.css 是每份文稿必須整體包含的樣式。它鎖定html, body的滿屏視口、定義.deck-viewport、固定.deck-stage為 1920×1080、用.active/.visible類切換幻燈片的可見性明確禁止用display: none/block切換否則會(huì)被后續(xù)布局類覆蓋導(dǎo)致所有頁(yè)面同時(shí)可見并在media print中按設(shè)計(jì)尺寸一頁(yè)一頁(yè)地排版幻燈片。prefers-reduced-motion降級(jí)也已內(nèi)置。HTML 架構(gòu)層html-template.md 中的SlidePresentation控制器同樣執(zhí)行Math.min(window.innerWidth / 1920, window.innerHeight / 1080)的等比縮放并通過translate(...) scale(...)居中舞臺(tái)。deck-stage.js的打印支持尤其值得注意_syncPrintPageRule()L393-L405在head注入page { size: 1920px 1080px; margin: 0; }并設(shè)置* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }。這對(duì)保證紙面紋理的打印效果是有利的但原文檔仍謹(jǐn)慎提醒fractal-noise 紙紋在部分 PDF 導(dǎo)出中可能不渲染使用前必須實(shí)測(cè)不可想當(dāng)然認(rèn)為紋理必然保留。色彩系統(tǒng)黃紙、墨藍(lán)、奶油與朱砂紅調(diào)色板 Tokendesign.md的 YAML 頭部以colors段定義了完整的調(diào)色板。需要說明的是文檔正文中出現(xiàn)的{colors.paper}、{colors.ink}一類寫法是該設(shè)計(jì)系統(tǒng)的token 引用語(yǔ)法指向 YAML 中定義的對(duì)應(yīng)色值生成 HTML 時(shí)應(yīng)展開為實(shí)際十六進(jìn)制值。完整清單如下Token值角色paper#EFE56A主導(dǎo)表面色飽和鎘黃頁(yè)面「紙」的底色paper-2#F5ECA0更淺淡的黃交替卡片填充色打破相鄰?fù)ㄆ琾aper-3#E8D85A更深更飽和的黃.deep頁(yè)面變體用paper-extra#FBE6A4帶奶油味的暖黃最具差異化的卡片變體常配輕微旋轉(zhuǎn)cream#F8F1D6卡片背景柔和米白象牙色讓卡片從高飽和黃頁(yè)面上「退后」kraft#C9A66B暖褐色卡夫紙色token 已定義但在源碼中未啟用ink#1F3A8A深鈷藍(lán)系統(tǒng)的結(jié)構(gòu)身份色所有文字、邊框、分隔線、回形針插畫與陰影ink-soft#2D4FB8稍淺鈷藍(lán)變體可用但少用ink-line#3457C4更亮的鈷藍(lán)用于線條裝飾少用ink-deep#0E1430帶藍(lán)調(diào)的近黑色.ink頁(yè)面變體背景red#C2342B朱砂紅僅用于印章組件與否定態(tài) pill絕不作為常規(guī)強(qiáng)調(diào)色olive#6B7A2E已定義但未啟用保留的三級(jí)色orange#D8702A已定義但未啟用保留的三級(jí)色顏色別名段color-aliases把語(yǔ)義角色綁定到具體 tokenc-bg: paper頁(yè)面底色、c-text: ink正文色、c-card: cream卡片色、c-stamp: red印章色。在實(shí)現(xiàn)中可直接用別名書寫 CSS 變量保證「改了 token 全局生效」的換膚能力。默認(rèn)規(guī)則默認(rèn)頁(yè)面表面paper-surface組件黃紙 雙層漸變 紙紋始終如此。默認(rèn)紙紋paper-grain-overlayopacity 0.35、multiply 混合不可省略。默認(rèn)標(biāo)題色黃紙面上用ink墨藍(lán)面.ink變體上用paper。默認(rèn)正文色黃/奶油面上用ink墨藍(lán)面上用paper強(qiáng)調(diào)性引導(dǎo)語(yǔ)可用opacity: 0.85弱化。默認(rèn)卡片表面cream需要打破相鄰?fù)珪r(shí)改用paper-2或paper-extra。默認(rèn)邊框ink1.5px始終如此。默認(rèn)陰影5px 6px 0 0 ink硬偏移、零模糊緊湊卡片可用4px 5px 0 0最大引文面板用8px 9px 0 0。默認(rèn)標(biāo)簽/元數(shù)據(jù)色ink以 0.65–0.75 透明度用于 chrome 與頁(yè)腳。默認(rèn)手寫批注色inkCaveat 在黃底上永遠(yuǎn)是墨藍(lán)。默認(rèn)印章色red這是紅色唯一被例行使用的位置。一條貫穿始終的鐵律奶油是卡片填充黃色是頁(yè)面填充。兩者混用會(huì)破壞層級(jí)——黃卡片放在黃頁(yè)面上會(huì)「消失」奶油卡片放在奶油頁(yè)面上會(huì)讓「多層紙」的閱讀感崩塌。字體系統(tǒng)印刷、手寫、檔案的三聲部編排三款字體與情感聲部系統(tǒng)加載三款網(wǎng)絡(luò)字體聲部分工不重疊且每個(gè)聲部都承載明確的情感定位Space Grotesk400/500/600/700印刷、官方、排字機(jī)——「文檔本身的聲音」承載所有標(biāo)題與展示級(jí)文字。Caveat500/600/700手寫、個(gè)人、頁(yè)邊注釋——「正在讀文檔的人的聲音」承載旁注、批注、步驟數(shù)字、pill 文字、超大序數(shù)。Caveat 是系統(tǒng)的「?jìng)€(gè)人聲音機(jī)制」只要腳本體出現(xiàn)語(yǔ)氣就從「官方公告」切換到「頁(yè)邊的手寫便條」。DM Mono400/500檔案、目錄卡、索引——「為文檔歸檔的系統(tǒng)的聲音」承載所有元數(shù)據(jù)標(biāo)簽、top-chrome 品牌鎖標(biāo)、頁(yè)腳、來(lái)源署名、坐標(biāo)軸標(biāo)簽。完整字號(hào)量表Token字號(hào)字體字重用途scribble-mega360pxCaveat700裝飾性超大引號(hào)字形display-mega196pxSpace Grotesk700封面大標(biāo)題display-section168pxSpace Grotesk700章節(jié)頁(yè)大標(biāo)題墨藍(lán)面display-stat168pxSpace Grotesk700主打統(tǒng)計(jì)數(shù)字h1-cta130pxSpace Grotesk700結(jié)尾 CTA 標(biāo)題h1-chart110pxSpace Grotesk700圖表頁(yè)標(biāo)題h296pxSpace Grotesk700標(biāo)準(zhǔn)議程/數(shù)據(jù)標(biāo)題h2-md84pxSpace Grotesk700高密度頁(yè)內(nèi)章節(jié)標(biāo)題scribble-lg70pxCaveat700流程步驟數(shù)字scribble-md60pxCaveat700CTA 步驟數(shù)字、大號(hào)腳本強(qiáng)調(diào)quote-text50pxSpace Grotesk500引文正文h2-sm50pxSpace Grotesk700公告頁(yè)標(biāo)題card-row44pxSpace Grotesk600議程行標(biāo)簽card-h338pxSpace Grotesk700卡片標(biāo)題scribble-sm38pxCaveat600封面頁(yè)邊手寫注、公告卡元數(shù)據(jù)scribble-xs32pxCaveat600卡片內(nèi)小號(hào)手寫批注card-h3-sm28pxSpace Grotesk700子卡標(biāo)題body22pxSpace Grotesk400標(biāo)準(zhǔn)正文段落body-md21pxSpace Grotesk400表格內(nèi)正文body-sm19pxSpace Grotesk400高密度卡片內(nèi)緊湊正文body-list18pxSpace Grotesk400卡片內(nèi)列表項(xiàng)label-top18pxDM Mono500Top-chrome 品牌鎖標(biāo)與元數(shù)據(jù)label-meta16pxDM Mono500日期條、署名stamp16pxDM Mono500印章文字label-footer15pxDM Mono500頁(yè)腳 chrome行內(nèi)混排的兩條關(guān)鍵規(guī)則Caveat 數(shù)字內(nèi)嵌smallCaveat 數(shù)字內(nèi)的small元素應(yīng)切換為 60px 的 Caveat用于單位后綴如M、×、%。手寫后綴保留了父數(shù)字的「手?jǐn)?shù)」感覺。.underline強(qiáng)調(diào)Caveat 手寫批注文本中的.underlinespan 使用 2px 實(shí)線墨藍(lán)下劃線模擬手繪強(qiáng)調(diào)。默認(rèn)規(guī)則與簽名處理默認(rèn)字號(hào)映射正文body22px高密度頁(yè)降至body-sm19px、標(biāo)準(zhǔn)卡片標(biāo)題card-h338px、默認(rèn)封面display-mega196px、默認(rèn)章節(jié)頁(yè)display-section168px、默認(rèn)統(tǒng)計(jì)數(shù)字display-stat168px配 Caveatsmall單位后綴、默認(rèn)手寫批注scribble-sm38px步驟數(shù)字用scribble-lg70px。所有展示元素默認(rèn)字重 700正文默認(rèn) 400。拿不準(zhǔn)時(shí)標(biāo)準(zhǔn)卡片的三層結(jié)構(gòu)是38px Space Grotesk 卡片標(biāo)題 22px Space Grotesk 正文 底部 32px Caveat 手寫便條——印刷標(biāo)題、印刷正文、手寫旁注的三層節(jié)奏是系統(tǒng)最易識(shí)別的內(nèi)部模式?！负灻幚怼苟温涞募s束是非可選的只要對(duì)應(yīng)元素出現(xiàn)就必須遵守每一頁(yè)都必須有paper-grain-overlay紙紋否則紙張美學(xué)崩塌——紙紋屬于表面的一部分不是裝飾。每張卡片必須是「1.5px 實(shí)線墨藍(lán)邊框 4px 圓角 硬墨藍(lán)偏移陰影5–8px、零模糊」三件套。缺陰影卡片像沒被釘住缺邊框卡片像沒被印刷。Caveat 在黃/奶油面上永遠(yuǎn)是墨藍(lán)在墨藍(lán)面上永遠(yuǎn)是紙黃其他顏色的 Caveat 不存在?；匦吾槻鍒D永遠(yuǎn)偏離軸線旋轉(zhuǎn)典型區(qū)間 -14° 到 20°0° 旋轉(zhuǎn)會(huì)破壞手工釘住的美感。印章永遠(yuǎn)旋轉(zhuǎn) -4°3px 紅色實(shí)線邊框、紅色等寬文字、零圓角印章文字永遠(yuǎn)是 DM Mono 大寫。每個(gè) Space Grotesk 展示級(jí)標(biāo)題使用負(fù)字距-0.02em 到 -0.04em越大越緊。手寫數(shù)字Caveat 60–70px是流程示意圖與有序 CTA 列表的唯一步驟編號(hào)機(jī)制不得替換為 Space Grotesk 數(shù)字。top-chrome 鎖標(biāo)必須包含行內(nèi)#markSVG 字形它是品牌身份的一部分。排版原則系統(tǒng)的節(jié)奏是「印刷標(biāo)題 印刷正文 手寫旁注 等寬檔案標(biāo)簽」四聲部、各歸其位。把任何一聲部調(diào)換如用 Space Grotesk 寫旁注、用 Caveat 排正文都會(huì)讓編輯語(yǔ)氣坍塌。系統(tǒng)不使用斜體下劃線只出現(xiàn)在 Caveat.underlinespan 上2px 實(shí)線墨藍(lán)正文中的粗體很罕見強(qiáng)調(diào)要么換更大的重字重 Space Grotesk要么在下方補(bǔ)一條 Caveat 手寫批注。組件系統(tǒng)從紙面到回形針design.md的components段定義了系統(tǒng)全部的視覺原子組件。以下逐一說明其構(gòu)造與用途。紙面表面與紙紋paper-surface默認(rèn)頁(yè)面表面的背景是三層疊加的徑向漸變r(jià)adial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.18), transparent 60%)左上柔光radial-gradient(140% 100% at 80% 95%, rgba(0,0,0,.05), transparent 55%)右下柔影 基礎(chǔ)紙黃。這讓頁(yè)面在「?jìng)?cè)光」下呈現(xiàn)真實(shí)紙張的起伏。paper-grain-overlay紙紋覆蓋層掛在.slide::before偽元素上背景是fractalNoise SVGdata URIfeTurbulencebaseFrequency1.4、octaves2opacity 0.35、mix-blend-mode: multiply。在墨藍(lán)頁(yè)面上 opacity 降至 0.25 并切換為screen混合——這一切換是硬性要求在深色墨藍(lán)頁(yè)面上繼續(xù)用 multiply 會(huì)把頁(yè)面弄得發(fā)灰渾濁。紙紋不可省略沒有它紙面退化成平涂卡通黃。釘住的卡片pinned-card通用卡片模式奶油填充 1.5px 墨藍(lán)邊框 4px 微圓角 5px 6px 0 0 ink硬偏移陰影。這是系統(tǒng)的通用卡片語(yǔ)法每張卡片看起來(lái)都像被釘在頁(yè)面上的一張紙。變體pinned-card-altpaper-2填充用于打斷相鄰?fù)ㄆ?。pinned-card-alt2paper-extra填充 輕微旋轉(zhuǎn)0.6°–1.5°營(yíng)造「歪著釘」的效果。回形針插圖pin-illustration手繪安全回形針 SVGcolor: currentColor可隨上下文染色寬度 110–640px 隨用途變化旋轉(zhuǎn) -14° 到 20°。兩個(gè)字形變體閉合回形針#pinviewBox 0 0 360 110右側(cè)螺旋彈簧、軸掃向左側(cè)、左端橢圓形鎖扣帽與開口回形針#pin-openviewBox 0 0 360 130鎖扣抬起、尖頭朝左。回形針同時(shí)承擔(dān)裝飾與語(yǔ)義信號(hào)雙重角色——它出現(xiàn)在卡片頂部、封面裝飾、章節(jié)頁(yè)超大強(qiáng)調(diào)插圖可達(dá) 640px 寬、以及釘住議程行。凡回形針出現(xiàn)頁(yè)面即被解讀為「釘著的文檔」。手寫批注scribbleCaveat 手寫體文字塊常用色ink行高 1.05可整體旋轉(zhuǎn) -1.5° 到 -3° 增強(qiáng)手寫感可含.underlinespan 做手繪強(qiáng)調(diào)。用于頁(yè)邊旁注、「我」的批注、大號(hào)腳本強(qiáng)調(diào)。印章stamp3px 朱砂紅實(shí)線邊框、紅字等寬大寫文字DM Mono 16px、字距 0.18em、text-transform: uppercase、padding6px 16px、固定旋轉(zhuǎn) -4°、零圓角。用于狀態(tài)標(biāo)記CONFIDENTIAL、RECEIVED 等。紅色在本系統(tǒng)中僅此一處加否定態(tài) pill 兩處使用。頁(yè)面 Chrometop-chrome絕對(duì)定位top: 44px; left/right: 64pxDM Mono 18px、字距 0.12em、大寫。左側(cè)品牌鎖標(biāo)含行內(nèi)#markSVG 字形右側(cè)元數(shù)據(jù)標(biāo)簽對(duì)。footer-chrome絕對(duì)定位left/right: 64px; bottom: 36pxDM Mono 15px、字距 0.14em、大寫、opacity 0.65。典型為「左來(lái)源 右頁(yè)碼」對(duì)。墨藍(lán)頁(yè)面上兩組 chrome 文字色翻轉(zhuǎn)為paper。表格與 Pilltable-cellpadding18px 22px、borderBottom/borderRight: 1.5px solid rgba(31,58,138,.5)半透明墨藍(lán)分隔線、21px 正文。對(duì)比表單元格嵌套在「奶油 墨藍(lán)邊框 偏移陰影」的卡片語(yǔ)法內(nèi)。pill-yes肯定態(tài)ink實(shí)底、紙黃文字、1.5px 墨藍(lán)邊框、圓角 999px、Caveat 28px 手寫體。手寫字形放在 UI pill 形狀內(nèi)是有意為之的錯(cuò)位。pill-no否定態(tài)透明底、紅字紅框1.5px 紅邊、DM Mono 16px 大寫、字距 0.14em。這是紅色在印章之外唯一被例行使用的場(chǎng)合。pill-part部分態(tài)paper-2淺黃底 Caveat 墨藍(lán)手寫文字。number-scriptCaveat 700、60–70px 手寫數(shù)字用于流程示意圖與有序 CTA 步驟。手寫數(shù)字傳達(dá)「手工計(jì)數(shù)」而非「算法計(jì)數(shù)」。字號(hào)與間距實(shí)現(xiàn)注意組件內(nèi)部使用的{spacing.card-pad-md}等也是 token 引用展開值為card-pad-md: 28px 28px 24px、card-pad-lg: 32px 22px 22px、card-pad-xl: 36px 28px 28px、card-pad-quote: 60px 80px?？ㄆ瑑?nèi)部距經(jīng)驗(yàn)值頂部 28–36px、兩側(cè) 22–28px、底部 22–28px。布局系統(tǒng)畫布、錨點(diǎn)與 Chrome 框架畫布系統(tǒng)目標(biāo)畫布為固定 1920×1080渲染在deck-stage內(nèi)。所有尺寸像素固定等比縮放交給舞臺(tái)組件處理。絕大多數(shù)頁(yè)面采用絕對(duì)定位 邊緣錨定內(nèi)容區(qū)left: 64px; right: 64px; top: 110px; bottom: 100px卡片行用定向網(wǎng)格回形針插圖作為覆蓋層絕對(duì)定位在卡片堆疊之上。內(nèi)邊距與網(wǎng)格間距Anchor值用途pad-edge64px每頁(yè)左右邊緣縮進(jìn)pad-top110px內(nèi)容頂部縮進(jìn)位于 44px top chrome 之下pad-bottom90px內(nèi)容底部縮進(jìn)位于 36px footer chrome 之上grid-gap-sm22px流程卡間距grid-gap-md28px公告/統(tǒng)計(jì)卡間距grid-gap-lg32px便簽卡網(wǎng)格間距密度哲學(xué)系統(tǒng)是「中等密度、內(nèi)容充實(shí)」的當(dāng) 3–6 張卡片以清晰布局釘滿頁(yè)面時(shí)最具權(quán)威感每張卡片含標(biāo)題、正文塊、往往再加一條手寫旁注。一頁(yè)只有一個(gè)居中標(biāo)題、其余留白會(huì)被視為壞掉的設(shè)計(jì)——系統(tǒng)按「充實(shí)的手賬本頁(yè)面」設(shè)計(jì)而大半空白的筆記本頁(yè)面讀起來(lái)像沒寫完。例外是封面與章節(jié)頁(yè)按慣例更稀疏但用超大展示字號(hào)196px與大號(hào)回形針插圖補(bǔ)償。密度概念與 SKILL.md 中的「低密度/演講驅(qū)動(dòng) vs 高密度/閱讀優(yōu)先」二分法一致——Pin Paper 屬于閱讀友好、卡片化的中等密度形態(tài)。深度與層級(jí)唯一的深度語(yǔ)言是硬偏移陰影系統(tǒng)唯一的元素級(jí)深度手法是硬墨藍(lán)偏移陰影5px 6px 0 0 ink標(biāo)準(zhǔn)、4px 5px 0 0緊湊、6px 7px 0 0 rgba(239,229,106,.25)圖表卡黃色調(diào)陰影、8px 9px 0 0最大引文面板。陰影永遠(yuǎn)實(shí)心、永遠(yuǎn)向右下偏移、永遠(yuǎn)零模糊。系統(tǒng)內(nèi)不存在模糊投影。深度的三個(gè)來(lái)源硬偏移陰影實(shí)心墨藍(lán)矩形向右下偏移配合 4px 微圓角與 1.5px 邊框定義通用卡片卡片看起來(lái)被釘住并略微抬離頁(yè)面。紙面紋理深度紙紋opacity 0.35、multiply制造微觀起伏讀作紙張纖維。這是表面級(jí)深度而非元素級(jí)?；匦吾樧鳛樯疃葦⑹禄匦吾?SVG 定位在卡片頂緣position: absolute; top: -14 ~ -22px; left: 28~90px; transform: rotate(-6° ~ -12°)制造「卡片被釘?shù)巾?yè)面」的錯(cuò)覺?；匦吾樈忉屃藘杉驴ㄆ瑸槭裁从嘘幱翱ㄆ瑸槭裁从行D(zhuǎn)。另外pinned-card-alt2的輕微旋轉(zhuǎn)0.6°–1.5°是刻意的「不完美」必須節(jié)制使用每頁(yè)一到兩張而非每張卡片都轉(zhuǎn)。形狀與處理4px 微圓角與三檔邊框圓角系統(tǒng)值用途0px印章、回形針字形、頁(yè)碼4px卡片、面板、表格容器、圖片包裝——系統(tǒng)的微圓角999px僅限 pill4px 微圓角小到讀作「印刷紙張的輕微滲邊」而非「圓角 UI」。Pill 是唯一圓形形態(tài)且 Pill 內(nèi)是 Caveat 手寫字形這種反常組合。邊框權(quán)重1.5px 實(shí)線ink通用卡片邊框用于每張奶油卡片、每個(gè)表格容器、每個(gè)面板。1.5px 虛線rgba(31,58,138,.45)議程行之間、CTA 步驟之間、卡片內(nèi)來(lái)源注記上沿的虛線分隔營(yíng)造「坐標(biāo)紙斷線」感。3px 實(shí)線red僅用于印章組件。2px 實(shí)線ink僅用于 Caveat.underlinespan。頁(yè)面結(jié)構(gòu)與質(zhì)感清單綜合以上規(guī)范一張標(biāo)準(zhǔn) Pin Paper 頁(yè)面由這些要素構(gòu)成paper-surface黃紙底 ::before紙紋覆蓋頂部 DM Mono top-chrome品牌鎖標(biāo) 元數(shù)據(jù)1–6 張奶油卡片含三件套1.5px 墨藍(lán)邊框、4px 圓角、硬偏移陰影卡片間用paper-2/paper-extra交替并偶加旋轉(zhuǎn)每張卡片頂緣釘一枚偏離軸線的回形針#pin閉合或#pin-open開口底部 Caveat 手寫批注需要狀態(tài)時(shí)加蓋 -4° 紅色印章頁(yè)腳為「來(lái)源 頁(yè)碼」的 65% 透明度 DM Mono。墨藍(lán)章節(jié)頁(yè)則整體翻轉(zhuǎn)明暗紙紋切到 screen 混合。Dos and Donts實(shí)踐紀(jì)律Do每頁(yè)都應(yīng)用紙紋覆蓋層紋理是紙張閱讀感的基礎(chǔ)。每張卡片都用通用三件套1.5px 墨藍(lán)邊框 4px 圓角 硬墨藍(lán)偏移陰影。所有印刷標(biāo)題用 Space Grotesk 700、混合大小寫、負(fù)字距。所有手寫/個(gè)人聲部用 Caveat——旁注、步驟數(shù)字、pill 文字。所有檔案標(biāo)簽、chrome 標(biāo)簽、頁(yè)腳字符串用 DM Mono 大寫字距 0.12–0.18em。每個(gè)回形針插圖都偏離軸線旋轉(zhuǎn)典型 -14° 到 20°。讓卡片內(nèi)容充實(shí)3–6 張卡片釘滿頁(yè)面各含標(biāo)題 正文 旁注。狀態(tài)標(biāo)記用旋轉(zhuǎn)印章組件-4° 旋轉(zhuǎn)是它的身份。流程與 CTA 列表里把 Caveat 步驟數(shù)字與 Space Grotesk 卡標(biāo)題成對(duì)使用。每頁(yè)最多一張卡片帶輕微旋轉(zhuǎn)0.6°–1.5°制造「歪釘」效果別讓每張都轉(zhuǎn)。Dont不要省略紙紋否則表面退化為平涂卡通黃。不要用其他列表符號(hào)替換 Caveat 手寫數(shù)字步驟號(hào)永遠(yuǎn)是手寫體。不要在本系統(tǒng)的印章與否定態(tài) pill 之外使用紅色。不要以 0° 渲染回形針偏離軸線的傾斜才讓它像實(shí)物回形針。不要用模糊陰影卡片只用硬墨藍(lán)偏移陰影。不要在黃色頁(yè)面上用黃卡片卡片永遠(yuǎn)是奶油色奶油卡與黃頁(yè)的對(duì)比就是「多層紙」的信號(hào)。不要用 Caveat 排正文手寫體只用于旁注與強(qiáng)調(diào)絕不用于段落。不要用 DM Mono 排標(biāo)題等寬是檔案聲部不是編輯聲部。不要給卡片用大于 4px 的圓角微圓角是印刷紙角信號(hào)更大的圓角會(huì)塌縮成普通 UI。不要排版近乎空白的頁(yè)面系統(tǒng)按充實(shí)的手賬本設(shè)計(jì)稀疏讀起來(lái)像壞掉。CJK 與國(guó)際化內(nèi)容中文手賬的字體配對(duì)Pin Paper 是全模板庫(kù)中最適合中文的模板黃色便簽紙、鈷藍(lán)墨、回形針插圖與田野筆記本語(yǔ)境都能自然遷移在中文里直接讀作一頁(yè)「筆記本 / 手賬」。推薦中文字體配對(duì)角色拉丁字體中文字體字重展示/標(biāo)題Space Grotesk 700Space Grotesk龍藏體 Long Cang400唯一可用字重正文Space Grotesk 400Space Grotesk霞鶩文楷 LXGW WenKai400手寫/批注CaveatCaveat龍藏體 Long Cang400標(biāo)簽/等寬DM Mono 大寫追蹤DM Mono霞鶩文楷 LXGW WenKai400中文不要強(qiáng)上等寬混排策略策略 A——擴(kuò)展 fontFamily在每個(gè) token 的fontFamily末尾追加中文字體。Space Grotesk 展示 token 變?yōu)镾pace Grotesk, Long Cang, Helvetica Neue, Arial, sans-serif正文 token 變?yōu)镾pace Grotesk, LXGW WenKai, Helvetica Neue, Arial, sans-serifCaveat token 變?yōu)镃aveat, Long Cang, cursive。拉丁字形用原字體渲染CJK 自動(dòng)回落到中文字體。字體加載link relpreconnect hrefhttps://fonts.googleapis.com link relpreconnect hrefhttps://fonts.gstatic.com crossorigin link hrefhttps://fonts.googleapis.com/css2?familySpaceGrotesk:wght400;500;600;700familyCaveat:wght500;600;700familyDMMono:wght400;500familyLongCangdisplayswap relstylesheet link hrefhttps://cdn.jsdelivr.net/npm/cn-fontsource-lxgw-wen-kai-regular/font.css relstylesheet通用 CJK 調(diào)整行高正文 1.75–1.85展示 1.15–1.25。字距CJK 一律 0。text-transformCJK 不做大寫變換。使用全角標(biāo)點(diǎn)。「」。展示級(jí)標(biāo)題不加句號(hào)中文排版慣例。Pangu 盤古之白中英文之間加空格使用 Claude而非使用Claude。每句話只用一種字體。中文美學(xué)說明龍藏體 Long Cang是硬筆手寫中文字體——無(wú)筆鋒的、圓珠筆落在紙上的中文書寫是「Space Grotesk Caveat 雙角色標(biāo)題與批注」的最佳中文替身。它在 96–168px 大字號(hào)下讀作自信的手寫田野筆記標(biāo)題——正是 Pin Paper 想要喚起的情緒。展示標(biāo)題與 Caveat 等效批注層都用它純中文里無(wú)需疊兩套視覺上難區(qū)分的手寫體Long Cang 一個(gè)承擔(dān)兩個(gè)角色。霞鶩文楷 LXGW WenKai是楷書衍生、為屏幕閱讀設(shè)計(jì)的正文體保留手寫楷書的溫度與輕微不規(guī)則感同時(shí)在 18–22px 正文尺寸下保持易讀。它是 Long Cang 手寫展示的最佳對(duì)應(yīng)物與系統(tǒng)「田野筆記本個(gè)人聲部」的調(diào)性完全吻合中文正文一律用 LXGW WenKai 400?；匦吾槻鍒D、旋轉(zhuǎn)紅印章、奶油卡片 硬偏移陰影——全部原樣遷移。Caveat pill 組件手寫字形放在圓角 pill 內(nèi)翻譯為「Long Cang 字形的同款 pill」在中文語(yǔ)境下讀作可愛的「手?jǐn)?shù)」感。系統(tǒng)最標(biāo)志性的節(jié)奏「印刷標(biāo)題 印刷正文 手寫旁注」在純中文下變?yōu)椤窵ong Cang 標(biāo)題 LXGW WenKai 正文 略小一號(hào)的 Long Cang 旁注」聲部差異靠字號(hào)、旋轉(zhuǎn)與顏色而非換字體來(lái)實(shí)現(xiàn)。DM Mono 大寫追蹤標(biāo)簽不遷移到 CJK中文元數(shù)據(jù)在 top-chrome 中改用 LXGW WenKai 400 混合大小寫、字距 0純拉丁元數(shù)據(jù)日期字符串、來(lái)源 URL仍用 DM Mono。已知中文缺口Long Cang 與 LXGW WenKai 視覺相鄰都帶手寫楷書 DNA。三聲部編輯配對(duì)印刷/手寫/檔案在純中文中塌縮為兩聲部手寫展示/手寫正文/純拉丁檔案。文檔明確指出這不是 bug——純中文 Pin Paper 演示比拉丁版更統(tǒng)一地「被手觸碰過」反而更接近系統(tǒng)追求的手賬美學(xué)。從預(yù)覽到正式生成的完整工作流結(jié)合 preview.md 與 README.md使用該模板的推薦流程是在 selection-index.json 中僅憑元數(shù)據(jù)mood、tone、best_for、avoid_for、formality、density、scheme篩出候選。對(duì)入圍候選只讀preview.md用它生成三個(gè)標(biāo)題頁(yè)預(yù)覽1 個(gè) STYLE_PRESETS 安全選項(xiàng) 至少 1 個(gè) bold 選項(xiàng) 1 個(gè) wildcard。預(yù)覽必須做成真實(shí)的首屏標(biāo)題頁(yè)使用用戶真實(shí)的標(biāo)題/副標(biāo)題/語(yǔ)境不得出現(xiàn)preview、generated from、preview.md、template、preset、Option A/B/C、文件名、路徑或來(lái)源文檔標(biāo)簽不得把模板名或 slug 放在幻燈片上chrome 只能使用真實(shí)內(nèi)容演示標(biāo)題、真實(shí)章節(jié)名、日期、作者、公司、頁(yè)碼或用戶材料中的真實(shí)短語(yǔ)。用戶選定后讀取本 design.md 作為設(shè)計(jì)配方生成正式整檔。正式生成的硬性約束SKILL.md 與 README.md 共同約定輸出為單個(gè)自包含 HTML 文件包含 viewport-base.css 全文固定 1920×1080 舞臺(tái)等比縮放保留所選模板的字體、調(diào)色板、裝飾詞匯、間距節(jié)奏與組件語(yǔ)法用戶真實(shí)內(nèi)容始終是主角生成后必須對(duì)渲染截圖同時(shí)驗(yàn)證文字溢出與面板重疊——scrollHeight通過并不代表網(wǎng)格面板沒有相互遮蓋。迭代指南新增內(nèi)容時(shí)的十步檢查表每個(gè)新頁(yè)面的背景都是paper-surface::before上的紙紋覆蓋層不要跳過紋理。每張新卡片都用通用三件套奶油填充、1.5px 墨藍(lán)邊框、4px 圓角、硬墨藍(lán)偏移陰影不要自定義。每個(gè)新標(biāo)題都是 Space Grotesk 700 混合大小寫 負(fù)字距不要換字重。每個(gè)新步驟數(shù)字或有序列表標(biāo)記都是 Caveat 手寫體 60–70px不要換成數(shù)字字體。每個(gè)新標(biāo)簽或元數(shù)據(jù)標(biāo)簽都是 DM Mono 大寫、字距 0.12–0.18em。每個(gè)新回形針插圖都偏離軸線旋轉(zhuǎn)「已固定」感用閉合#pin「已提起」感用開口#pin-open。給卡片加個(gè)人聲部在底部追加 Caveat 旁注通常配.underlinespan 做手繪強(qiáng)調(diào)。給卡片加狀態(tài)在卡片上部放印章組件保持輕微旋轉(zhuǎn)。打破相鄰?fù)谀逃?、paper-2、paper-extra 之間交替填充給一張卡片加輕微旋轉(zhuǎn)。使用墨藍(lán)面變體如章節(jié)頁(yè)文字色翻轉(zhuǎn)為paper紙紋 opacity 降到 0.25 并切screen混合。已知缺口與實(shí)現(xiàn)注意事項(xiàng)從源碼與設(shè)計(jì)文檔交叉核對(duì)以下實(shí)現(xiàn)約束需要在生成時(shí)特別留意系統(tǒng)依賴deck-stageWeb Component由 deck-stage.js 定義。沒有它1920×1080 畫布不會(huì)縮放幻燈片將以原生像素尺寸渲染?；匦吾槻鍒D是文檔頂部的內(nèi)聯(lián) SVG symbol 定義。新頁(yè)面需要回形針時(shí)必須通過use href#pin或use href#pin-open引用且 symbol 定義必須存在于文檔中。紙紋覆蓋層使用帶feTurbulence的>贊分享AI 技能AI 插件前端【免費(fèi)下載鏈接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills項(xiàng)目地址https://gitcode.com/gh_mirrors/fr/frontend-slides點(diǎn)擊查看免費(fèi)下載相關(guān)推薦Pin Paper 模板實(shí)戰(zhàn)指南用 frontend-slides 構(gòu)建黃色便簽紙 回形針的田野筆記本式演示Pin Paper 模板實(shí)戰(zhàn)指南用 frontend slides 構(gòu)建黃色便簽紙 回形針的田野筆記本式演示 本指南圍繞 frontend sliAI 技能AI 插件前端frontend-slides Pin Paper 模板全解析黃色便簽紙 安全別針插畫的田野筆記本式幻燈片設(shè)計(jì)系統(tǒng)frontend slides Pin Paper 模板全解析黃色便簽紙 安全別針插畫的田野筆記本式幻燈片設(shè)計(jì)系統(tǒng) Pin Paper 是 froAI 技能AI 插件前端Pin Paper 模板設(shè)計(jì)系統(tǒng)解析用 frontend-slides 打造田野筆記本風(fēng)格的 1920×1080 固定舞臺(tái)幻燈片Pin Paper 模板設(shè)計(jì)系統(tǒng)解析用 frontend slides 打造田野筆記本風(fēng)格的 1920×1080 固定舞臺(tái)幻燈片 導(dǎo)讀 Pin AI 技能AI 插件前端創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考