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