Pencil MCP: Els dissenys es converteixen en codi en un instant, multiplicant per 8 l'eficiència del desenvolupament frontend

Hola a tothom, sóc Liang Xiao, que treballa en productes per a l'estranger. S'acosta l'Any Nou xinès, així que abans de les vacances comparteixo amb vosaltres les meves últimes novetats. Quan creeu pàgines web o aplicacions, heu tingut mai aquesta sensació: Voleu crear una pàgina bonica, però el vostre disseny no és bo Trobar un dissenyador és massa car, i trobar plantilles gratuïtes no és adequat Finalment, teniu un disseny, però convertir-lo en codi genera molts problemes Sincerament, quan treballava en projectes frontend, podia passar-me mig dia ajustant els estils basant-me en el disseny. L'espaiat era 2px incorrecte, el color no era correcte, m'havia oblidat d'afegir vores arrodonides... Una i altra vegada, era molt frustrant. La bona notícia és que ara amb Pencil MCP, aquests problemes es poden resoldre bàsicament. Recentment l'he utilitzat per crear algunes pàgines i he descobert que és realment bo: des del disseny fins al codi, l'eficiència ha augmentat directament diverses vegades. I el més important és que la qualitat dels dissenys generats per la IA és força bona i la fidelitat del codi és molt alta. Aquest article parlarà de: què és exactament Pencil, per què val la pena utilitzar-lo i com començar ràpidament. ## 01. Què és Pencil? Explicat en termes senzills En poques paraules, Pencil és una eina que pot connectar el disseny i el codi. El flux de treball anterior era així: Crear dissenys a Figma El dissenyador anota les dimensions, els colors i l'espaiat El desenvolupador escriu el codi línia per línia basant-se en el disseny Després d'escriure, es compara amb el disseny i es descobreix que la fidelitat és només del 70%-80% Ajustaments repetits, comunicació... La solució de Pencil és: Només cal que descriviu els requisits en llenguatge natural (per exemple, "dissenya'm un reproductor de música d'estil Apple") i la IA pot generar directament el disseny al llenç i, a continuació, generar el codi corresponent amb un sol clic (Next.js, Flutter, Vue, etc. són compatibles). I el que és sorprenent és que podeu ajustar-ho mentre dissenyeu. Per exemple: "Hi ha massa morat, canvia a una mica de verd" "Augmenta una mica l'espaiat" "Fes referència a l'estil d'aquest lloc web" La IA us ajudarà a ajustar el disseny i el codi en temps real, sense que hàgiu de fer res vosaltres mateixos. ## 02. Per què crec que val la pena utilitzar Pencil? ### 1) L'eficiència és realment alta La forma tradicional de crear un disseny de pàgina pot trigar de 4 a 6 hores. Amb Pencil, es pot fer en 20-40 minuts. I la fidelitat del codi pot arribar al 98%+, bàsicament no cal ajustar els estils. Ho he provat jo mateix, crear una Landing Page senzilla, des del disseny fins al codi, tot fet, només em va trigar mitja hora. ### 2) Qualitat de disseny estable Abans, quan deixava que la IA generés dissenys, sovint em trobava amb aquests problemes: Combinació de colors no coordinada Espaiat desordenat Talla de lletra inconsistent Pencil té un sistema de disseny i uns estàndards estètics, la qualitat dels dissenys generats és relativament estable. Tot i que no és necessàriament perfecte, almenys no és massa lleig. ### 3) Admet múltiples piles tecnològiques Tant si feu Next.js, Flutter, Vue o SwiftUI, Pencil pot generar automàticament el codi corresponent. Això és realment convenient per a persones com jo que fan desenvolupament multiplataforma: un disseny, codi per a múltiples plataformes. ## 03. Com instal·lar i utilitzar Pencil? A continuació, comparteixo el meu propi procés d'instal·lació i ús, que hauria de ser la forma més senzilla actualment. ### Pas 1: Instal·lar Pencil MCP Cerqueu "pencil" directament al vostre IDE (VS Code, Cursor, etc.) Feu clic a Instal·lar, no aneu a altres llocs per descarregar-lo (per evitar descarregar una versió piratejada) Nota: Cercar directament a l'IDE és la forma més segura. ### Pas 2: Deixeu que la IA us ajudi a configurar-lo Com configurar-lo després de la instal·lació? Sincerament, al principi no ho entenia gaire. Després vaig descobrir que la forma més senzilla és: deixar que la IA us ajudi a configurar-lo. Obriu el vostre assistent de programació d'IA (Claude Code o Codex) i digueu-li: Ja he instal·lat aquest MCP "pencil" en aquest IDE, si us plau, ajudeu-me a configurar-lo perquè el meu Claude Code, Codex, VS Code puguin utilitzar aquest MCP I espereu que us ajudi a configurar-lo. ### Pas 3: Començar a dissenyar amb Pencil Després de la configuració, veureu una icona de llapis a la part esquerra de l'IDE, feu clic per obrir el llenç de Pencil.


I després, a la caixa de diàleg d'IA a la dreta, digues-li quin disseny vols.

Per exemple:

"Ajuda'm a dissenyar un reproductor de música amb estil Apple"

"Fes una Landing Page senzilla, amb el blau com a color principal"

"Fes-me'n una de semblant, referint-te a l'estil d'aquest lloc web"


La IA generarà un esborrany de disseny al llenç. Si no estàs satisfet, pots continuar demanant-li que l'ajusti:

"La lletra és massa petita, fes-la més gran"

"Augmenta l'espaiat"

"Canvia a un color més suau"

Ajusta fins que estiguis satisfet.

Quart pas: genera codi

Un cop finalitzat l'esborrany del disseny, pots demanar a la IA que t'ajudi a generar el codi.

Pots dir directament:

"Ajuda'm a generar codi Next.js"

"Genera codi Flutter"

"Genera codi Vue 3"

La IA generarà automàticament el codi corresponent segons el teu esborrany de disseny.

Efecte real:



04. Algunes experiències d'ús reals

Després d'utilitzar-lo diverses vegades, hi ha algunes sensacions per compartir:

1) Descriu les necessitats de manera específica

Al principi deia "fes-me un lloc web", però el que generava la IA no era exactament el que volia.

Més tard vaig descobrir que com més específica fos la descripció, millor seria l'efecte.

Per exemple:

Mala descripció: "Fes-me una pàgina d'inici de sessió"

Bona descripció: "Fes-me una pàgina d'inici de sessió senzilla, amb un logotip a la part superior, quadres d'entrada de correu electrònic i contrasenya al mig i un botó d'inici de sessió a la part inferior, amb un estil similar al del lloc web oficial d'Apple"

2) Pots pujar imatges de referència

Si veus un disseny de lloc web que t'agrada, pots fer una captura de pantalla i pujar-la a la IA perquè la faci servir de referència.

L'esborrany de disseny generat d'aquesta manera s'aproparà més a les teves expectatives.

3) La iteració és més important que fer-ho bé d'una sola vegada

No pensis que pots generar un disseny perfecte d'una sola vegada, això no és realista.

La manera correcta és: primer genera'n un d'aproximat i després ajusta'l a poc a poc.

Ajusta només un o dos llocs cada vegada, com ara "augmenta l'espaiat" o "fes el color més suau", d'aquesta manera l'eficiència és màxima.

4) La qualitat del codi és força bona

Ho he provat diverses vegades i la qualitat del codi generat és força alta:

• L'estructura del codi és clara
• L'alt grau de restauració de l'estil (98%+)
• La disposició responsiva també està ben feta

Bàsicament, es pot agafar i modificar lleugerament per utilitzar-lo.

05. Alguns punts a tenir en compte

Tot i que Pencil és molt útil, hi ha algunes coses a tenir en compte:

1) L'estètica encara depèn de tu

La IA pot ajudar-te a generar esborranys de disseny, però tu has de jutjar si és bonic o no.

Per tant, mira més dissenys bons habitualment i millora la teva estètica, perquè puguis donar millors indicacions quan utilitzis Pencil.

Aquí tens alguns llocs recomanats per trobar referències de disseny:

• Dribbble
• Mobbin (recull especialment la IU mòbil)
• Captures de pantalla de diversos llocs web excel·lents

2) La interacció complexa encara l'has d'escriure tu mateix

Pencil és adequat per fer pàgines estàtiques i interaccions convencionals, però si hi ha animacions complexes, gestos, etc., encara has d'escriure el codi tu mateix.

Tot i això, per a la majoria d'escenaris, Pencil ja és suficient.

3) Triar el model d'IA correcte és molt important

He provat diversos models i he descobert que Claude Opus 4.5 té el millor rendiment visual.

Si utilitzes altres models, la qualitat de l'esborrany de disseny generat pot ser inferior.

06. Dades de comparació d'eficiència

Finalment, comparteixo un conjunt de dades que he provat jo mateix:

Indicador	Mètode tradicional	Ús de Pencil	Millora de l'eficiència
Producció d'esborranys de disseny	4-6 hores	20-40 minuts	8 vegades
Grau de restauració del codi	70%-85%	98%+
Temps de correcció d'errors		Reducció del 90%
Adaptació multi-terminal	Cal repetir el desenvolupament	Generació automàtica	Estalvi del 75% de temps

Per a mi, el valor més gran és: transferir l'energia de "com implementar" a "quina funció fer".

07. Resum

Pencil essencialment connecta el disseny i el desenvolupament, permetent-te impulsar tot el procés amb llenguatge natural.

Si també estàs fent desenvolupament front-end, fent els teus propis productes, et recomano que provis Pencil:

Qualitat del codi estable: fidelitat del 98%+, bàsicament no cal ajustar l'estil Admet múltiples stacks tecnològics: Next.js, Flutter, Vue, etc. es poden utilitzar Impulsat per llenguatge natural: descriu els requisits en llenguatge humà, l'IA genera automàticament Finalment, si també estàs fent desenvolupament independent, programació d'IA, pots deixar un comentari per parlar-ne: Com fas el disseny normalment? Has utilitzat Pencil? Com és l'efecte? Revisaré acuradament cada comentari. Fins a la propera.