Anthropic એ Terminal UI Mockups માટે Claude Code માં /design કમાન્ડ ઉમેર્યો

Anthropic એ Claude Code ને નવા /design કમાન્ડ સાથે વિસ્તૃત કર્યું છે, જે ડેવલપર્સને ટર્મિનલ છોડ્યા વિના UI mockups બનાવવા, તેમાં સુધારો કરવા અને જોવા દે છે.

સીધું ટર્મિનલમાં UI Prototyping

Figma અને shell વચ્ચે સતત બદલાવાને બદલે, તમે હવે /design a few options for a login screen જેવું કંઈક ટાઈપ કરી શકો છો. Claude તેના જવાબમાં કેટલાક ઇન્ટરેક્ટિવ “artboards” સાથે પ્રત્યુત્તર આપે છે જે હાઈ-ફિડેલિટી mockups પ્રદર્શિત કરે છે. તમે લેઆઉટની સરખામણી કરી શકો છો, મનપસંદ પસંદ કરી શકો છો અને ફોલો-અપ પ્રશ્નો પૂછીને દેખાવમાં સુધારો કરી શકો છો—આ બધું જ પ્રોડક્શન કોડની એક લાઇન લખતા પહેલા.

તમારા Codebase માંથી Context-Aware Mockups

ડેવલપર Nate Parrott નોંધે છે કે Claude ખરેખર વર્તમાન રિપોઝિટરી (repository) વાંચે છે. તે કલર પેલેટ્સ, કમ્પોનન્ટ લાઈબ્રેરી અને લેઆઉટ કન્વેન્શન મેળવે છે, અને પછી પ્રોજેક્ટની હાલની શૈલી સાથે મેળ ખાવા માટે દરેક ડિઝાઇનને તૈયાર કરે છે. પરિણામો “Artifacts” તરીકે દેખાય છે, જે Claude ની અંદર એક સમર્પિત વ્યુ (view) છે જે અલગ ગ્રાફિક્સ એડિટર ખોલ્યા વિના છબીઓ દર્શાવે છે. આ તબક્કે mockups ફક્ત Claude ના વર્કસ્પેસમાં જ હોય છે; તેને કોડમાં રૂપાંતરિત કરતા પહેલા તમારે તેને ફાઇલ સિસ્ટમમાં સ્પષ્ટપણે સેવ કરવા પડશે.

AI-સહાયિત ડેવલપમેન્ટ માટે તે શા માટે મહત્વનું છે

આ કમાન્ડ સોફ્ટવેર ડેવલપમેન્ટ લાઇફ સાયકલના બે તબક્કાઓ—ડિઝાઇન અને કોડિંગ—ને એકમાં ભેગા કરે છે. જે ટીમો ઝડપને મહત્વ આપે છે તેઓ સિંગલ પ્રોમ્પ્ટ સાથે અનેક લેઆઉટ વિકલ્પો જનરેટ કરી શકે છે, જેનાથી પ્રારંભિક તબક્કાની શોધ (discovery) ઝડપી બને છે. Claude લાઈવ codebase નો ઉપયોગ કરતું હોવાથી, mockups બ્રાન્ડ સાથે સુસંગત રહે છે અને કમ્પોનન્ટ સિસ્ટમ સાથે સુસંગત હોય છે, જેનાથી સામાન્ય ઇમેજ જનરેશન પછી થતી મેન્યુઅલ સફાઈમાં ઘટાડો થાય છે.

Anthropic આને “AI software engineer” તરફનું એક પગલું ગણાવે છે જે લોજિક અને એસ્થેટિક્સ (aesthetics) બંનેને સંભાળે છે. જો ટર્મિનલ મલ્ટી-મોડલ વર્કસ્પેસ તરીકે કામ કરી શકે, તો કોડ લખવા અને યુઝર એક્સપિરિયન્સને આકાર આપવા વચ્ચેની રેખા નોંધપાત્ર રીતે ઓછી થઈ જાય છે.

વર્તમાન મર્યાદાઓ

આ ફીચર હજુ પ્રીવ્યુમાં છે. જનરેટ થયેલા mockups આપમેળે સોર્સ ફાઇલો બનતા નથી; તમારે તેને જાતે એક્સપોર્ટ અને ઇન્ટિગ્રેટ કરવા પડશે. તે વધારાનું સ્ટેપ સમય બચાવવામાં અવરોધ બની શકે છે, ખાસ કરીને ડઝનબંધ કમ્પોનન્ટ્સ ધરાવતા મોટા પ્રોજેક્ટ્સમાં.

તેને કેવી રીતે ટ્રાય કરવું

લેટેસ્ટ પ્રીવ્યુ બિલ્ડ મેળવવા અને /design કમાન્ડ સક્ષમ કરવા માટે claude update રન કરો.

મુખ્ય મુદ્દાઓ

  • ઇન્ટિગ્રેટેડ પ્રોટોટાઇપિંગ: /design સીધા ટર્મિનલ પ્રોમ્પ્ટમાંથી અનેક UI artboards જનરેટ કરે છે.
  • કોન્ટેક્સ્ટ્યુઅલ કન્સીસ્ટન્સી: Claude હાલના codebase ને સ્કેન કરે છે જેથી mockups હાલની ડિઝાઇન સિસ્ટમ સાથે સુસંગત રહે.
  • સ્ટ્રીમલાઇન્ડ વર્કફ્લો: Claude Design ની પ્રોમ્પ્ટિંગ શક્તિને Claude Code ના એક્ઝિક્યુશન સાથે જોડીને, ડેવલપર્સ ટૂલ્સ બદલ્યા વિના કન્સેપ્ટથી વિઝ્યુઅલ પ્રોટોટાઇપ સુધી પહોંચી શકે છે.

Anthropic નો નવો /design કમાન્ડ ડેવલપર્સને સીધા ટર્મિનલ પરથી UI mockups બનાવવા અને તેમાં સુધારો કરવાની સુવિધા આપે છે, જે ડિઝાઇન ટૂલ્સ અને કોડ એડિટર્સ વચ્ચેના આદાન-પ્રદાનને ઘટાડે છે—જે એક એવો અવરોધ છે જેનો ઘણા ઝડપી ગતિએ કામ કરતી ટીમો હજુ પણ સામનો કરી રહી છે.

CLI પ્રોમ્પ્ટમાંથી વિઝ્યુઅલ ડ્રાફ્ટ્સ જનરેટ કરવા

તમે /design a few options for a login screen જેવો કમાન્ડ ટાઈપ કરો છો અને Claude ઇન્ટરેક્ટિવ artboards નો સેટ રિટર્ન કરે છે. દરેક artboard એક હાઈ-ફિડેલિટી mockup બતાવે છે જેને તમે ઇન્સ્પેક્ટ કરી શકો છો, સરખાવી શકો છો અને ફોલો-અપ પ્રશ્નો પૂછીને તેમાં સુધારો કરી શકો છો.

Claude વર્તમાન પ્રોજેક્ટની ફાઇલો વાંચે છે, કલર પેલેટ્સ, કમ્પોનન્ટ લાઈબ્રેરી અને લેઆઉટ કન્વેન્શન કાઢે છે, અને પછી તેને મેચ કરવા માટે ડિઝાઇનને તૈયાર કરે છે. આઉટપુટ “Artifacts” તરીકે દેખાય છે, જે એક એવો વ્યુ છે જે અલગ ગ્રાફિક એડિટર ખોલ્યા વિના છબીઓ પ્રદર્શિત કરે છે. આ સમયે mockups ફક્ત Claude ના વર્કસ્પેસમાં જ હોય છે; તેને કોડમાં રૂપાંતરિત કરતા પહેલા તમારે તેને ફાઇલ સિસ્ટમમાં સ્પષ્ટપણે સેવ કરવા પડશે.

ડેવલપર્સ ટર્મિનલમાં ડિઝાઇન ટૂલ કેમ ઈચ્છે છે

મોટાભાગના ડેવલપર્સ તેમનો દિવસનો મોટો હિસ્સો કોડ ટર્મિનલ અને UI ડિઝાઇન એપ વચ્ચે બદલાવામાં વિતાવે છે. વિઝ્યુઅલ પ્રોટોટાઇપિંગને તે જ વિન્ડોમાં લાવવાથી જ્યાં કોડ લખવામાં આવે છે, સોફ્ટવેર ડેવલપમેન્ટ લાઇફ સાયકલના બે તબક્કાઓ એકમાં ભેગા થઈ જાય છે.

ઝડપ પર ધ્યાન કેન્દ્રિત કરતી ટીમો માટે, સિંગલ પ્રોમ્પ્ટ સાથે અનેક લેઆઉટ વિકલ્પો જનરેટ કરવાથી પ્રારંભિક તબક્કાના ડિસ્કવરી ફેઝને ઝડપી બનાવી શકાય છે. Claude દ્વારા હાલના codebase નું વાંચન mockups ને બ્રાન્ડ સાથે સુસંગત રાખે છે અને પ્રોજેક્ટની કમ્પોનન્ટ સિસ્ટમ સાથે સુસંગત રાખે છે, જેનાથી સામાન્ય ઇમેજ-જનરેશન સ્ટેપ પછી થતી મેન્યુઅલ સફાઈમાં ઘટાડો થાય છે.

Anthropic આ ઉમેરાને “AI software engineer” તરફનું એક પગલું ગણાવે છે જે લોજિક અને એસ્થેટિક્સ બંનેને સંભાળી શકે છે. જો ટર્મિનલ હવે મલ્ટી-મોડલ વર્કસ્પેસ તરીકે કામ કરી શકે, તો કોડ લખવા અને યુઝર એક્સપિરિયન્સને આકાર આપવા વચ્ચેની રેખા વધુ પાતળી થઈ જાય છે.

મર્યાદાઓ અને પરંપરાગત ડિઝાઇન ટૂલ્સની જરૂરિયાત

આ ફીચર હજુ પ્રીવ્યુમાં છે, અને કેટલીક વ્યવહારિક મર્યાદાઓ હજુ પણ છે. પ્રથમ, જનરેટ થયેલા મોકઅપ્સ આપમેળે સોર્સ ફાઇલો બનતા નથી; ડેવલપર્સે તેને મેન્યુઅલી એક્સપોર્ટ અને ઇન્ટિગ્રેટ કરવા પડશે. મોટા પ્રોજેક્ટ્સ માટે, જ્યાં ડઝનબંધ ઘટકોને સિંક કરવાની જરૂર હોય છે, ત્યાં આ વધારાનું પગલું સમયની બચત ઘટાડી શકે છે.

ફીચર વધુ સુધરે ત્યારે શું જોવું

Anthropic ના અપડેટ મુજબ, આ કમાન્ડને સરળ claude update દ્વારા સક્ષમ કરી શકાય છે.

મુખ્ય વાત: Claude Code ના ટર્મિનલમાં ડિઝાઇન પ્રોમ્પ્ટને એમ્બેડ કરવાથી ડેવલપર્સને કન્સેપ્ટથી વિઝ્યુઅલ પ્રોટોટાઇપ સુધી પહોંચવા માટે એક શોર્ટકટ મળે છે, પરંતુ વર્કફ્લો હજુ પણ મેન્યુઅલ હેન્ડ-ઓફ પર આધારિત છે અને તેમાં સમર્પિત UI ટૂલ્સ જેવી ઊંડાઈનો અભાવ છે. તેનો વિકાસ એ નક્કી કરશે કે આ કમાન્ડ માત્ર એક મર્યાદિત સુવિધા બની રહેશે કે AI-સંચાલિત ડેવલપમેન્ટ સ્ટેકનો મુખ્ય ભાગ બનશે.