పెన్సిల్ MCP: డిజైన్ కాపీలు తక్షణమే కోడ్‌గా మారుతాయి, ఫ్రంట్-ఎండ్ డెవలప్‌మెంట్ సామర్థ్యం 8 రెట్లు పెరుగుతుంది

అందరికీ నమస్కారం, నేను విదేశీ ఉత్పత్తులను తయారు చేస్తున్న లియాంగ్ జియావోను. త్వరలో నూతన సంవత్సరం వస్తోంది, కాబట్టి సంవత్సరం ముగిసేలోపు నా తాజా అనుభవాలను మీతో పంచుకోవడానికి ఒక కథనాన్ని పోస్ట్ చేస్తున్నాను.

వెబ్‌పేజీలు లేదా యాప్‌లను రూపొందించేటప్పుడు, మీకు ఎప్పుడైనా ఇలా అనిపించిందా:

ఒక అందమైన పేజీని తయారు చేయాలనుకుంటున్నాను, కానీ నా స్వంత డిజైన్ నైపుణ్యాలు సరిగా లేవు డిజైనర్లను నియమించడం చాలా ఖరీదైనది, మరియు ఉచిత టెంప్లేట్‌లు సరిపోవు చివరగా ఒక డిజైన్ కాపీని పొందాను, కానీ దానిని కోడ్‌గా మార్చడం చాలా సమస్యలను కలిగిస్తుంది నిజాయితీగా చెప్పాలంటే, నేను గతంలో ఫ్రంట్-ఎండ్ ప్రాజెక్ట్‌లను చేస్తున్నప్పుడు, డిజైన్ కాపీకి అనుగుణంగా స్టైల్‌లను సర్దుబాటు చేయడానికి చాలా సమయం తీసుకునేది. ఖాళీ 2px తేడాగా ఉండటం, రంగు సరిగ్గా లేకపోవడం, గుండ్రని మూలలను జోడించడం మరచిపోవడం... పదే పదే, ఇది చాలా బాధించేది.

శుభవార్త ఏమిటంటే: ఇప్పుడు పెన్సిల్ అనే MCP ఉంది, ఈ సమస్యలన్నీ దాదాపుగా పరిష్కరించబడతాయి.

నేను ఇటీవల కొన్ని పేజీలను రూపొందించడానికి దీనిని ఉపయోగించాను, మరియు ఇది నిజంగా చాలా బాగుంది - డిజైన్ కాపీ నుండి కోడ్ వరకు, సామర్థ్యం చాలా రెట్లు పెరిగింది. మరియు చాలా ముఖ్యమైన విషయం ఏమిటంటే, AI మీకు రూపొందించడంలో సహాయపడే డిజైన్ కాపీ నాణ్యత చాలా బాగుంది, మరియు కోడ్ పునరుద్ధరణ కూడా చాలా ఎక్కువగా ఉంది.

ఈ కథనం పెన్సిల్ అంటే ఏమిటి, ఇది ఎందుకు ఉపయోగకరంగా ఉంటుంది మరియు దీన్ని ఎలా త్వరగా ప్రారంభించాలో చర్చిస్తుంది.

01. పెన్సిల్ అంటే ఏమిటి? సాధారణ పదాలలో స్పష్టం చేయండి

సరళంగా చెప్పాలంటే, పెన్సిల్ అనేది డిజైన్ మరియు కోడ్‌ను కనెక్ట్ చేయగల ఒక సాధనం.

గతంలో ప్రక్రియ ఇలా ఉండేది:

Figmaలో డిజైన్ కాపీని రూపొందించండి డిజైనర్ కొలతలు, రంగులు మరియు ఖాళీలను సూచిస్తారు డెవలపర్‌లు డిజైన్ కాపీని అనుసరించి కోడ్‌ను లైన్ ద్వారా లైన్ వ్రాస్తారు కోడ్‌ను వ్రాసిన తర్వాత, డిజైన్ కాపీతో పోల్చండి, మరియు పునరుద్ధరణ రేటు 70%-80% మాత్రమే ఉంటుంది పదే పదే సర్దుబాటు చేయడం, కమ్యూనికేట్ చేయడం...

పెన్సిల్ యొక్క పరిష్కారం ఏమిటంటే:

మీరు సహజ భాషలో అవసరాలను వివరించాలి (ఉదాహరణకు, "ఆపిల్-శైలి మ్యూజిక్ ప్లేయర్‌ను రూపొందించడంలో నాకు సహాయపడండి"), మరియు AI నేరుగా కాన్వాస్‌పై డిజైన్ కాపీని ఉత్పత్తి చేస్తుంది, ఆపై ఒకే క్లిక్‌తో సంబంధిత కోడ్‌ను ఉత్పత్తి చేస్తుంది (Next.js, Flutter, Vue మొదలైనవి అన్నీ మద్దతు ఇస్తాయి).

మరియు ఆశ్చర్యకరమైన విషయం ఏమిటంటే, మీరు డిజైన్ చేస్తున్నప్పుడు సర్దుబాటు చేయవచ్చు. ఉదాహరణకు:

"ఊదా రంగు చాలా ఎక్కువగా ఉంది, కొంచెం ఆకుపచ్చ రంగును మార్చండి" "ఖాళీని కొంచెం పెద్దది చేయండి" "ఈ వెబ్‌సైట్ యొక్క శైలిని చూడండి" AI నిజ సమయంలో డిజైన్ మరియు కోడ్‌ను సర్దుబాటు చేయడంలో మీకు సహాయపడుతుంది, మీరు స్వయంగా ఏమీ చేయవలసిన అవసరం లేదు.

02. పెన్సిల్ ఉపయోగించడానికి విలువైనదని నేను ఎందుకు అనుకుంటున్నాను?

1) సామర్థ్యం నిజంగా ఎక్కువగా ఉంది

సాంప్రదాయ పద్ధతిలో ఒక పేజీ యొక్క డిజైన్ కాపీని రూపొందించడానికి 4-6 గంటలు పట్టవచ్చు. పెన్సిల్‌తో, మీరు 20-40 నిమిషాల్లో పూర్తి చేయవచ్చు.

మరియు కోడ్ పునరుద్ధరణ రేటు 98%+ వరకు ఉంటుంది, ప్రాథమికంగా మీరు స్టైల్‌లను సర్దుబాటు చేయవలసిన అవసరం లేదు.

నేను స్వయంగా ప్రయత్నించాను, ఒక సాధారణ ల్యాండింగ్ పేజీని రూపొందించడానికి, డిజైన్ నుండి కోడ్ వరకు మొత్తం పూర్తి చేయడానికి, ఇది అరగంట మాత్రమే పట్టింది.

2) డిజైన్ నాణ్యత స్థిరంగా ఉంది

గతంలో AIతో డిజైన్ కాపీని రూపొందించినప్పుడు, నేను తరచుగా ఈ సమస్యలను ఎదుర్కొనేవాడిని:

రంగు పథకం సమన్వయంగా లేదు ఖాళీలు గందరగోళంగా ఉన్నాయి ఫాంట్ పరిమాణాలు స్థిరంగా లేవు పెన్సిల్ వెనుక డిజైన్ సిస్టమ్ మరియు సౌందర్య ప్రమాణం ఉన్నాయి, మరియు ఉత్పత్తి చేయబడిన డిజైన్ కాపీ నాణ్యత చాలా స్థిరంగా ఉంది. ఇది ఖచ్చితంగా ఉండకపోవచ్చు, కానీ కనీసం ఇది చాలా అసహ్యంగా ఉండదు.

3) బహుళ సాంకేతిక స్టాక్‌లకు మద్దతు ఇస్తుంది

మీరు Next.js, Flutter, Vue లేదా SwiftUI చేస్తున్నా, పెన్సిల్ స్వయంచాలకంగా సంబంధిత కోడ్‌ను ఉత్పత్తి చేస్తుంది.

ఇది నా లాంటి బహుళ-ముగింపు అభివృద్ధి చేసేవారికి నిజంగా చాలా సౌకర్యంగా ఉంటుంది - ఒక డిజైన్ కాపీ, బహుళ ప్లాట్‌ఫారమ్‌ల కోడ్‌లు అన్నీ అందుబాటులో ఉన్నాయి.

03. పెన్సిల్‌ను ఎలా ఇన్‌స్టాల్ చేయాలి మరియు ఉపయోగించాలి?

నేను నా స్వంత ఇన్‌స్టాలేషన్ మరియు వినియోగ ప్రక్రియను పంచుకుంటాను, ఇది ప్రస్తుతం సులభమైన మార్గం అయి ఉండాలి.

మొదటి దశ: పెన్సిల్ MCPని ఇన్‌స్టాల్ చేయండి

మీ IDEలో (VS Code, Cursor మొదలైనవి) నేరుగా "పెన్సిల్" అని శోధించండి

ఇన్‌స్టాల్ చేయడానికి క్లిక్ చేయండి, ఇతర ప్రదేశాల నుండి డౌన్‌లోడ్ చేయవద్దు (పైరేటెడ్ సంస్కరణలను డౌన్‌లోడ్ చేయకుండా ఉండటానికి)

గమనిక: IDEలో నేరుగా శోధించడం సురక్షితమైన మార్గం.

రెండవ దశ: AI మీకు కాన్ఫిగర్ చేయడంలో సహాయపడనివ్వండి

ఇన్‌స్టాల్ చేసిన తర్వాత ఎలా కాన్ఫిగర్ చేయాలి?

నిజాయితీగా చెప్పాలంటే, నాకు మొదట్లో అర్థం కాలేదు. తరువాత, సులభమైన మార్గం ఏమిటంటే: AI మీకు కాన్ఫిగర్ చేయడంలో సహాయపడనివ్వండి.

మీ AI ప్రోగ్రామింగ్ అసిస్టెంట్‌ను (Claude Code లేదా Codex) తెరవండి మరియు దానితో ఇలా చెప్పండి:

నేను ఇప్పటికే ఈ IDEలో "పెన్సిల్" అనే MCPని ఇన్‌స్టాల్ చేసాను, దయచేసి నా Claude Code, Codex మరియు VS Code ఈ MCPని ఉపయోగించగల విధంగా కాన్ఫిగర్ చేయడంలో నాకు సహాయపడండి ఆపై అది మీకు కాన్ఫిగర్ చేయడంలో సహాయపడే వరకు వేచి ఉండండి.

మూడవ దశ: పెన్సిల్‌తో డిజైన్ చేయడం ప్రారంభించండి

కాన్ఫిగర్ చేసిన తర్వాత, మీరు IDE ఎడమ వైపున పెన్సిల్ చిహ్నాన్ని చూస్తారు, దాన్ని తెరవడానికి క్లిక్ చేయండి మరియు అది పెన్సిల్ కాన్వాస్ అవుతుంది.

ఆపై కుడివైపున ఉన్న AI డైలాగ్ బాక్స్‌లో, మీకు ఎలాంటి డిజైన్ కావాలో చెప్పండి.

ఉదాహరణకు:

"నాకు ఆపిల్ శైలిలో మ్యూజిక్ ప్లేయర్‌ను డిజైన్ చేయండి"

"నీలం రంగులో ఒక సాధారణ ల్యాండింగ్ పేజీని చేయండి"

"ఈ వెబ్‌సైట్ శైలిని అనుసరించి, నాకు అలాంటిదే చేయండి"

AI కాన్వాస్‌పై డిజైన్ డ్రాఫ్ట్‌ను రూపొందిస్తుంది. మీరు సంతృప్తి చెందకపోతే, దాన్ని సర్దుబాటు చేయడానికి కొనసాగించవచ్చు:

"ఫాంట్ చాలా చిన్నదిగా ఉంది, కొంచెం పెద్దది చేయండి"

"దూరం కొంచెం పెంచండి"

"మరింత మృదువైన రంగుకు మార్చండి"

మీరు సంతృప్తి చెందే వరకు సర్దుబాటు చేస్తూ ఉండండి.

నాల్గవ దశ: కోడ్‌ను రూపొందించడం

డిజైన్ డ్రాఫ్ట్ పూర్తయిన తర్వాత, AI మీకు కోడ్‌ను రూపొందించడానికి అనుమతించవచ్చు.

మీరు నేరుగా ఇలా చెప్పవచ్చు:

"నాకు Next.js కోడ్‌ను రూపొందించండి"

"Flutter కోడ్‌ను రూపొందించండి"

"Vue 3 కోడ్‌ను రూపొందించండి"

AI మీ డిజైన్ డ్రాఫ్ట్ ప్రకారం సంబంధిత కోడ్‌ను స్వయంచాలకంగా రూపొందిస్తుంది.

వాస్తవ ప్రభావం:

04. కొన్ని వాస్తవ వినియోగ అనుభవాలు

కొన్నిసార్లు ఉపయోగించిన తర్వాత, కొన్ని అనుభవాలు పంచుకుంటున్నాను:

1) అవసరాలను నిర్దిష్టంగా వివరించాలి

మొదట్లో నేను "నాకు ఒక వెబ్‌సైట్‌ను చేయండి" అని చెప్పేవాడిని, ఫలితంగా AI రూపొందించినది నాకు కావలసినది కాదు.

తరువాత, వివరణ ఎంత నిర్దిష్టంగా ఉంటే, ప్రభావం అంత మెరుగ్గా ఉంటుందని కనుగొన్నాను.

ఉదాహరణకు:

చెడ్డ వివరణ: "నాకు లాగిన్ పేజీని చేయండి"

మంచి వివరణ: "నాకు ఒక సాధారణ లాగిన్ పేజీని చేయండి, పైన లోగో, మధ్యలో ఇమెయిల్ మరియు పాస్‌వర్డ్ ఇన్‌పుట్ బాక్స్‌లు, దిగువన లాగిన్ బటన్ మరియు ఆపిల్ అధికారిక వెబ్‌సైట్ శైలిని అనుసరించండి"

2) సూచన చిత్రాలను అప్‌లోడ్ చేయవచ్చు

మీరు ఏదైనా వెబ్‌సైట్ డిజైన్ బాగుందని చూస్తే, మీరు దాని స్క్రీన్‌షాట్‌ను AIకి అప్‌లోడ్ చేసి, దానిని సూచనగా ఉపయోగించమని చెప్పవచ్చు.

ఈ విధంగా రూపొందించబడిన డిజైన్ డ్రాఫ్ట్ మీ అంచనాలకు దగ్గరగా ఉంటుంది.

3) ఒకేసారి పూర్తి చేయడం కంటే పునరావృతం చేయడం ముఖ్యం

ఒకేసారి పరిపూర్ణమైన డిజైన్‌ను రూపొందించాలని అనుకోకండి, ఇది అవాస్తవం.

సరైన మార్గం ఏమిటంటే: మొదట ఒక సాధారణమైనదాన్ని రూపొందించండి, ఆపై కొద్దికొద్దిగా సర్దుబాటు చేయండి.

ప్రతిసారీ ఒకటి లేదా రెండు స్థానాలను మాత్రమే సర్దుబాటు చేయండి, ఉదాహరణకు "దూరం కొంచెం పెంచండి", "రంగును మరింత మృదువుగా చేయండి", ఈ విధంగా సామర్థ్యం ఎక్కువగా ఉంటుంది.

4) కోడ్ నాణ్యత బాగానే ఉంది

నేను కొన్నిసార్లు ప్రయత్నించాను, రూపొందించబడిన కోడ్ నాణ్యత చాలా ఎక్కువగా ఉంది:

• కోడ్ నిర్మాణం స్పష్టంగా ఉంది
• శైలి పునరుద్ధరణ డిగ్రీ ఎక్కువగా ఉంది (98% +)
• ప్రతిస్పందించే లేఅవుట్ కూడా బాగానే ఉంది

ప్రాథమికంగా కొద్దిగా మార్పులు చేస్తే ఉపయోగించవచ్చు.

05. గమనించవలసిన కొన్ని విషయాలు

Pencil ఉపయోగించడానికి చాలా సులభంగా ఉన్నప్పటికీ, గమనించవలసిన కొన్ని విషయాలు ఉన్నాయి:

1) సౌందర్య దృష్టి మీపై ఆధారపడి ఉంటుంది

AI మీకు డిజైన్ డ్రాఫ్ట్‌ను రూపొందించడంలో సహాయపడుతుంది, కానీ అది బాగుందా లేదా అనేది మీరే నిర్ణయించుకోవాలి.

కాబట్టి సాధారణంగా మంచి డిజైన్‌లను ఎక్కువగా చూడండి, మీ సౌందర్య దృష్టిని మెరుగుపరచండి, తద్వారా మీరు Pencilని ఉపయోగించినప్పుడు మంచి మార్గదర్శకత్వం ఇవ్వగలరు.

సూచన కోసం డిజైన్‌లను కనుగొనడానికి కొన్ని స్థలాలను సిఫార్సు చేస్తున్నాను:

• Dribbble
• Mobbin (ప్రత్యేకంగా మొబైల్ UIని సేకరిస్తుంది)
• వివిధ అద్భుతమైన వెబ్‌సైట్‌ల స్క్రీన్‌షాట్‌లు

2) సంక్లిష్టమైన పరస్పర చర్యలను మీరే వ్రాయాలి

Pencil స్టాటిక్ పేజీలు మరియు సాధారణ పరస్పర చర్యలను చేయడానికి అనుకూలంగా ఉంటుంది, కానీ సంక్లిష్టమైన యానిమేషన్‌లు, సంజ్ఞలు మొదలైన వాటికి సంబంధించినది ఏదైనా ఉంటే, మీరు కోడ్‌ను మీరే వ్రాయాలి.

అయితే చాలా సందర్భాలలో, Pencil సరిపోతుంది.

3) సరైన AI మోడల్‌ను ఎంచుకోవడం చాలా ముఖ్యం

నేను కొన్ని మోడల్‌లను ప్రయత్నించాను మరియు Claude Opus 4.5 యొక్క విజువల్ పనితీరు ఉత్తమంగా ఉందని కనుగొన్నాను.

మీరు ఇతర మోడల్‌లను ఉపయోగిస్తే, రూపొందించబడిన డిజైన్ డ్రాఫ్ట్ నాణ్యత కొంచెం తక్కువగా ఉండవచ్చు.

06. సామర్థ్య పోలిక డేటా

చివరగా నేను స్వయంగా పరీక్షించిన డేటా సెట్‌ను పంచుకుంటున్నాను:

నాకు, అతిపెద్ద విలువ ఏమిటంటే: "ఎలా అమలు చేయాలి" అనే దాని నుండి "ఏమి ఫంక్షన్ చేయాలి" అనే దానిపై దృష్టిని మార్చడం.

07. సారాంశం

Pencil ప్రాథమికంగా డిజైన్ మరియు అభివృద్ధిని కలుపుతుంది, ఇది మొత్తం ప్రక్రియను నడపడానికి సహజ భాషను ఉపయోగించడానికి మిమ్మల్ని అనుమతిస్తుంది.

మీరు ఫ్రంట్-ఎండ్ డెవలప్‌మెంట్ చేస్తున్నట్లయితే, మీ స్వంత ఉత్పత్తులను తయారు చేస్తున్నట్లయితే, Pencilని ప్రయత్నించమని నేను గట్టిగా సిఫార్సు చేస్తున్నాను:కోడ్ నాణ్యత స్థిరంగా ఉంది: 98%+ ఖచ్చితత్వం, శైలిని సర్దుబాటు చేయవలసిన అవసరం లేదు

బహుళ సాంకేతిక స్టాక్‌లకు మద్దతు ఇస్తుంది: Next.js, Flutter, Vue మొదలైనవి ఉపయోగించవచ్చు

సహజ భాషా ఆధారితం: సాధారణ భాషలో అవసరాలను వివరించండి, AI స్వయంచాలకంగా ఉత్పత్తి చేస్తుంది

చివరగా, మీరు స్వతంత్ర అభివృద్ధి, AI ప్రోగ్రామింగ్ చేస్తున్నట్లయితే, చర్చించడానికి ఒక సందేశాన్ని ఇవ్వడానికి స్వాగతం:

మీరు సాధారణంగా డిజైన్‌ను ఎలా చేస్తారు?

మీరు పెన్సిల్ ఉపయోగించారా? ఫలితం ఎలా ఉంది?

నేను ప్రతి సందేశాన్ని జాగ్రత్తగా చూస్తాను. తదుపరి వ్యాసంలో కలుద్దాం.