近期，Anthropic 宣布對(duì)中國(guó)斷供 Claude 系列模型。由于 Claude 在編程領(lǐng)域具備非常領(lǐng)先的地位，國(guó)產(chǎn)模型能否在編程領(lǐng)域替代 Claude 就成為很多開發(fā)者關(guān)注的話題。
盡管 Claude 有較大的先發(fā)優(yōu)勢(shì)，但實(shí)際上國(guó)產(chǎn)模型在編程領(lǐng)域也進(jìn)展飛速，典型代表包括 Qwen3-Coder-480B-A35B、Kimi K2、GLM-4.5 和 DeepSeek V3.1，都展現(xiàn)了不俗的編程能力。
在 Artificial Analysis 的編碼基準(zhǔn)排行榜上，DeepSeek V3.1 排名第 4，高于Claude 4.1 的第 6 位。此外，GLM-4.5 排名第 10，Kimi K2 排名第 15 位，均高于GPT-4.1；在 OpenRouter 的編程場(chǎng)景調(diào)用量排行榜上，Qwen3-Coder-480B-A35B 排名第 6，DeepSeek V3.1 排名第 10，Kimi K2 排名第 17，GLM-4.5 排名第 19 位
這四款模型均已上線 PPIO。本文將 PPIO 模型 API 配置在 Cherry Studio 中，用四個(gè)前端設(shè)計(jì)類提示詞來橫向?qū)Ρ人目钅Ｐ偷木幊棠芰Α?/p>
# 01 PPT 封面圖設(shè)計(jì)
用html設(shè)計(jì)一張極具未來感和科技感的 PPT 封面。
整體風(fēng)格：賽博朋克 + 高級(jí)科技展示，復(fù)雜精美但保持專業(yè)感。
視覺元素： - 背景為深色（黑色/深藍(lán)漸變），層疊的三維幾何結(jié)構(gòu)，搭配發(fā)光的霓虹線條與網(wǎng)格。
- 中心有一個(gè)抽象的“能量核心”或“數(shù)據(jù)光環(huán)”，由粒子流、光點(diǎn)和環(huán)形波紋組成，散發(fā)藍(lán)紫色光芒。 - 周圍點(diǎn)綴高科技 HUD 元素（半透明儀表盤、坐標(biāo)網(wǎng)格、虛擬按鈕、掃描線），帶有動(dòng)態(tài)感。
- 在遠(yuǎn)處加入星空、粒子雨或光束，增加空間縱深。
排版： - 標(biāo)題位于畫面中心前景，采用未來感字體（粗體、發(fā)光描邊，文字占位符：“PPIO派歐云”）。
- 副標(biāo)題位于標(biāo)題下方，較小字體，半透明背景條承載，文字占位符：“中國(guó)領(lǐng)先的獨(dú)立分布式云計(jì)算服務(wù)商”
配色： - 主色調(diào)：電光藍(lán) + 紫色霓虹 + 深空黑。 -
輔助色：青色、銀白色，用于線條和粒子點(diǎn)綴。 規(guī)格：16:9 橫屏，超高清分辨率，適合作為 PPT 封面，整體效果要酷炫、未來感、科技感十足。
GLM-4.5
# 02 前端網(wǎng)頁設(shè)計(jì)
你是一位國(guó)際頂尖的數(shù)字雜志藝術(shù)總監(jiān)和前端開發(fā)專家，曾為Vogue、Elle等時(shí)尚雜志設(shè)計(jì)過數(shù)字版面，擅長(zhǎng)將奢華雜志美學(xué)與現(xiàn)代網(wǎng)頁設(shè)計(jì)完美融合，創(chuàng)造出令人驚艷的視覺體驗(yàn)。 請(qǐng)從以下設(shè)計(jì)風(fēng)格中，設(shè)計(jì)高級(jí)時(shí)尚雜志風(fēng)格的知識(shí)卡片，將日常信息以精致奢華的雜志編排呈現(xiàn)，讓用戶感受到如同翻閱高端雜志般的視覺享受。 優(yōu)雅復(fù)古風(fēng)格 (Elegant Vintage)采用優(yōu)雅復(fù)古風(fēng)格設(shè)計(jì)，重現(xiàn)20世紀(jì)初期印刷品的精致美學(xué)。使用米色或淡黃色紙張質(zhì)感背景，配以深棕、暗紅等老式印刷色。字體必須使用襯線字體如Baskerville或Noto Serif，標(biāo)題可使用裝飾性字體。排版應(yīng)對(duì)稱且莊重，遵循傳統(tǒng)書籍設(shè)計(jì)原則。裝飾元素包括精致的花紋邊框、古典分隔線和角落裝飾，可添加輕微做舊效果如紙張紋理和微妙污點(diǎn)。圖像應(yīng)用復(fù)古濾鏡處理，呈現(xiàn)褪色照片效果。整體設(shè)計(jì)應(yīng)散發(fā)出典雅、成熟且歷經(jīng)時(shí)間考驗(yàn)的氣質(zhì)，參考The New Yorker和老式法國(guó)時(shí)尚雜志的設(shè)計(jì)語言。
每種風(fēng)格都應(yīng)包含以下元素，但視覺表現(xiàn)各不相同：- 日期區(qū)域：以各風(fēng)格特有的方式呈現(xiàn)當(dāng)前日期- 標(biāo)題和副標(biāo)題：根據(jù)風(fēng)格調(diào)整字體、大小、排版方式- 引用區(qū)塊：設(shè)計(jì)獨(dú)特的引用樣式，體現(xiàn)風(fēng)格特點(diǎn)- 核心要點(diǎn)列表：以符合風(fēng)格的方式呈現(xiàn)列表內(nèi)容- 二維碼區(qū)域：將二維碼融入整體設(shè)計(jì)- 編輯筆記/小貼士：設(shè)計(jì)成符合風(fēng)格的邊欄或注釋
技術(shù)規(guī)范：- 使用HTML5、Font Awesome、Tailwind CSS和必要的JavaScript - * Font Awesome: [https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css](https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css) * Tailwind CSS: [https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css](https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css) * 中文字體: [https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap](https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap)- 可考慮添加微妙的動(dòng)效，如頁面載入時(shí)的淡入效果或微妙的懸停反饋- 確保代碼簡(jiǎn)潔高效，注重性能和可維護(hù)性- 使用CSS變量管理顏色和間距，便于風(fēng)格統(tǒng)一- 對(duì)于液態(tài)數(shù)字形態(tài)主義風(fēng)格，必須添加流體動(dòng)態(tài)效果和漸變過渡- 對(duì)于超感官極簡(jiǎn)主義風(fēng)格，必須精確控制每個(gè)像素和微妙的交互反饋- 對(duì)于新表現(xiàn)主義數(shù)據(jù)可視化風(fēng)格，必須將數(shù)據(jù)以視覺化方式融入設(shè)計(jì) 輸出要求：- 提供一個(gè)完整的HTML文件，包含所有設(shè)計(jì)風(fēng)格的卡片- 確保風(fēng)格共享相同的內(nèi)容，但視覺表現(xiàn)完全不同- 代碼應(yīng)當(dāng)優(yōu)雅且符合最佳實(shí)踐，CSS應(yīng)體現(xiàn)出對(duì)細(xì)節(jié)的極致追求- 設(shè)計(jì)的寬度為400px，高度不超過1280px- 對(duì)主題內(nèi)容進(jìn)行抽象提煉，只顯示列點(diǎn)或最核心句引用，讓人閱讀有收獲感- 永遠(yuǎn)用中文輸出，裝飾元素可用法語、英語等其他語言顯得有逼格- 二維碼截圖地址：（必須用）：https://tc.z.wiki/autoupload/f/6fga59ImoYVnXLveMjr5jFQqlHnI5_pTWlT7RQLwIqyyl5f0KlZfm6UsKj-HyTuv/20250916/MWVT/300X300/PP_%E5%86%85%E5%AE%B9%E8%90%A5%E9%94%80-%E7%95%99%E9%9C%80%E6%B1%82_%281%29.png 請(qǐng)以國(guó)際頂尖雜志藝術(shù)總監(jiān)的眼光和審美標(biāo)準(zhǔn)，創(chuàng)造風(fēng)格迥異但同樣令人驚艷的數(shù)字雜志式卡片，讓用戶感受到"這不是普通的信息卡片，而是一件可收藏的數(shù)字藝術(shù)品"。待處理內(nèi)容：日期：2025-09主題：{{Agent元年}}
可以看到，無論是 PPT 封面圖還是前端網(wǎng)頁設(shè)計(jì)中，四個(gè)模型的表現(xiàn)都很不錯(cuò)，基本能夠理解并還原提示詞所提出的要求
# 03 反應(yīng)力測(cè)試小游戲
你是前端工程師。請(qǐng)用單文件寫一個(gè)反應(yīng)力測(cè)試網(wǎng)頁（僅用原生 HTML/CSS/JS，不引第三方庫(kù)，不聯(lián)網(wǎng)）。規(guī)則： 1、初始顯示“點(diǎn)擊開始”；點(diǎn)擊后進(jìn)入等待狀態(tài)，隨機(jī) 800–2000ms 后背景變綠； 2、變綠后用戶點(diǎn)擊，顯示這次反應(yīng)時(shí)間（ms）；重復(fù) 3 次，顯示平均值； 3、設(shè)計(jì)要美觀：居中卡片、柔和配色、微動(dòng)效（過渡/陰影/按鈕態(tài)）； 4、適配手機(jī)（375px）和桌面（1440px）； 5、交互有防誤觸：變綠前點(diǎn)擊判為“太早了”； 6、代碼整潔，≤200 行（不含空行），含少量注釋。直接給出完整單文件 HTML。
在最終的小游戲中，DeepSeek V3.1的三次測(cè)試，每一次都是需要用戶主動(dòng)點(diǎn)擊開始才會(huì)開啟，如果用戶不點(diǎn)擊開始，游戲會(huì)處于等待狀態(tài)。而其他三個(gè)模型的第二、第三次測(cè)試是自動(dòng)、連續(xù)開啟的。相比之下，DeepSeek V3.1 會(huì)更加符合提示詞的要求，效果最佳。
暫無評(píng)論，快來評(píng)論吧!